/* /css/style.css */

:root {
	--bg-color: #121212; 
	--card-bg: #1e1e1e;
	--text-color: #f5f5f5;
	--accent-color: #d4af37; 
	--accent-hover: #b5952f;
	--disabled-bg: #2a2a2a;
	--disabled-text: #666666;
	--danger-color: #ff4c4c;
	--danger-hover: #cc0000;
	--font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--font-family);
	line-height: 1.6;
	padding: 20px;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Stili Testo */
h1, h2, h3 {
	color: var(--accent-color);
	margin-bottom: 15px;
}

/* Form e Input */
input, select, textarea, button {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #333;
	border-radius: 5px;
	background-color: #222;
	color: var(--text-color);
	/* I campi ereditano il carattere della pagina: senza questo userebbero
	   quello di sistema e i moduli sembrerebbero incollati da un'altra parte */
	font-family: inherit;
}

/* --- Perché il telefono non ingrandisca la pagina a ogni campo ---------
   Safari su iPhone, quando si tocca un campo il cui testo è più piccolo di
   16px, ingrandisce la pagina per renderlo leggibile — e non la rimpicciolisce
   più: chi sta compilando deve allargare le dita a ogni riga. I campi senza
   `font-size` prendono quello del browser (circa 13px), e finivano tutti lì.
   Sedici pixel sono anche il minimo sotto il quale un modulo su telefono si
   legge male, quindi la cura e il buon senso coincidono.
   `max()` rispetta chi ha ingrandito i caratteri nelle impostazioni. */
input, select, textarea {
	font-size: 16px;
	font-size: max(16px, 1rem);
}

/* Alcune schermate del back-office (editor delle piante, costruttore di
   query, tabelle modificabili) stringono apposta i loro campi: su un monitor
   è giusto, su un telefono riporterebbe l'ingrandimento a ogni tocco. Sotto
   i 1024px nessun campo scende sotto i 16px, e qui `!important` è lo
   strumento adatto: è una garanzia sul dispositivo, non uno stile. */
@media (max-width: 1024px) {
	input:not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		font-size: max(16px, 1rem) !important;
	}
}

button, .btn {
	background-color: var(--accent-color);
	color: #000;
	font-weight: bold;
	cursor: pointer;
	border: none;
	transition: background-color 0.3s ease;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}

button:hover, .btn:hover {
	background-color: var(--accent-hover);
}

.btn-small {
	padding: 5px 10px;
	font-size: 0.8rem;
	margin: 2px;
	border-radius: 3px;
}

.btn-danger {
	background-color: var(--danger-color);
	color: white;
}

.btn-danger:hover {
	background-color: var(--danger-hover);
}

.form-container {
	background-color: var(--card-bg);
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 30px;
}

/* Tabelle Dati */
.table-responsive {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	background-color: var(--card-bg);
	border-radius: 5px;
	overflow: hidden;
}

th, td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #333;
}

th {
	background-color: #2a2a2a;
	color: var(--accent-color);
	text-transform: uppercase;
	font-size: 0.9rem;
}

tr:hover {
	background-color: #2a2a2a;
}

/* Grid per la Dashboard */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.tile {
	background-color: var(--card-bg);
	padding: 30px 20px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: var(--text-color);
	border: 2px solid transparent;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tile h3 {
	margin: 10px 0;
	color: var(--text-color);
}

.tile.active:hover {
	border-color: var(--accent-color);
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.tile.disabled {
	background-color: var(--disabled-bg);
	color: var(--disabled-text);
	cursor: not-allowed;
	opacity: 0.6;
	filter: grayscale(100%);
}

.tile.disabled h3 {
	color: var(--disabled-text);
}

.header-action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

/* Card Dispense Utente (Con e senza Immagine di Sfondo) */
/* Card Dispense Utente (Nuovo stile con Colori e Badge) */
.dispensa-card {
	background-color: var(--card-bg);
	padding: 20px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	position: relative;
	/* overflow deve essere visibile per far sbordare il badge */
}

.dispensa-card:hover {
	border-color: var(--accent-color);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

/* Stile dell'immagine tonda stile Notifica iOS */
.dispensa-badge {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid var(--bg-color); /* Bordo spesso per staccarsi dallo sfondo della pagina */
	background-color: var(--card-bg);
	object-fit: cover;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	z-index: 10;
	transition: transform 0.3s ease;
}

.dispensa-card:hover .dispensa-badge {
	transform: scale(1.1) rotate(5deg);
}

/* =========================================
   RESPONSIVE DESIGN (MOBILE)
   ========================================= */
@media (max-width: 768px) {
	body {
		padding: 10px;
	}
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
	.header-action {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.table-responsive {
		overflow-x: visible;
	}
	table, thead, tbody, th, td, tr {
		display: block;
		width: 100%;
	}
	thead {
		display: none;
	}
	tr {
		margin-bottom: 20px;
		border: 1px solid #444;
		border-radius: 8px;
		background-color: var(--card-bg);
	}
	td {
		text-align: left !important;
		padding: 15px;
		border-bottom: 1px solid #333;
		position: relative;
	}
	td:last-child {
		border-bottom: none;
	}
	td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.8rem;
		text-transform: uppercase;
		color: var(--accent-color);
		margin-bottom: 8px;
		font-weight: bold;
	}
}
/* =========================================
   COMPONENTI COMUNI (avvisi, badge, check)
   ========================================= */
.alert {
	padding: 12px 15px;
	border-radius: 5px;
	margin-bottom: 20px;
	color: #fff;
}

.alert-ok {
	background-color: #28a745;
}

.alert-ko {
	background-color: var(--danger-color);
}

.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.78rem;
	font-weight: bold;
	background-color: #2a2a2a;
	white-space: nowrap;
}

.badge-ok {
	color: #2ecc71;
	border: 1px solid rgba(46, 204, 113, 0.4);
}

.badge-off {
	color: #888;
	border: 1px solid #444;
}

.badge-corso {
	color: var(--accent-color);
	border: 1px solid rgba(212, 175, 55, 0.5);
	margin-left: 8px;
}

.badge-info {
	color: #3498db;
	border: 1px solid rgba(52, 152, 219, 0.4);
}

.check-riga {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 5px 0 20px 0;
	cursor: pointer;
}

.check-riga input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--accent-color);
}

/* =========================================
   EDITOR DELLA PIANTA DI SALA
   ========================================= */
.editor-sala {
	background-color: var(--card-bg);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 25px;
}

.editor-barra {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #333;
}

.editor-barra .gruppo-bottoni {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.editor-barra button {
	width: auto;
	margin: 0;
}

.contatore-posti {
	font-size: 0.95rem;
	color: #aaa;
}

.contatore-posti strong {
	color: var(--accent-color);
	font-size: 1.3rem;
}

/* Il palco / tavolino in cima alla sala */
.palco-display {
	border: 2px dashed var(--accent-color);
	border-radius: 8px;
	color: var(--accent-color);
	text-align: center;
	padding: 12px;
	margin: 0 auto 25px auto;
	width: 100%;
	letter-spacing: 4px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.9rem;
}

.palco-display.tavolino {
	border-radius: 999px;
	padding: 18px 12px;
}

/* Le file di posti */
.fila {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 8px;
	background-color: rgba(255, 255, 255, 0.02);
	border: 1px solid transparent;
}

.fila:hover {
	border-color: #333;
}

.fila-intestazione {
	width: 120px;
	flex-shrink: 0;
}

.fila-intestazione input {
	margin: 0;
	padding: 6px 8px;
	font-size: 0.85rem;
}

.fila-posti {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	justify-content: center;
	min-height: 42px;
}

.fila-azioni {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.fila-azioni button {
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	font-size: 0.8rem;
	background-color: #333;
	color: #ddd;
	border-radius: 5px;
}

.fila-azioni button:hover {
	background-color: var(--accent-color);
	color: #000;
}

.fila-azioni button.pericolo:hover {
	background-color: var(--danger-color);
	color: #fff;
}

/* Il singolo posto */
.posto-box {
	width: 42px;
	height: 42px;
	border-radius: 6px 6px 10px 10px;
	background-color: var(--accent-color);
	color: #000;
	border: 1px solid var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.posto-box:hover {
	transform: translateY(-2px);
}

.posto-box.disattivo {
	background-color: transparent;
	color: #555;
	border: 1px dashed #444;
}

.editor-nota {
	color: #888;
	font-size: 0.85rem;
	margin-top: 15px;
	line-height: 1.5;
}

/* Anteprima in sola lettura (lista piante) */
.pianta-anteprima .posto-box {
	width: 14px;
	height: 14px;
	font-size: 0;
	border-radius: 3px;
	cursor: default;
	pointer-events: none;
}

.pianta-anteprima .fila {
	padding: 2px;
	margin-bottom: 3px;
	background: none;
	border: none;
}

.pianta-anteprima .fila-posti {
	gap: 2px;
	min-height: 0;
	/* Le file non devono andare a capo: spezzerebbero la forma della sala */
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.pianta-anteprima {
	display: inline-block;
	max-width: 260px;
	overflow-x: auto;
}

@media (max-width: 768px) {
	.fila {
		flex-direction: column;
		align-items: stretch;
	}
	.fila-intestazione {
		width: 100%;
	}
	.posto-box {
		width: 36px;
		height: 36px;
		font-size: 0.75rem;
	}
}

/* =========================================
   MAPPA DELLA SALA (prenotazione, sportello, check-in)
   -----------------------------------------
   La dimensione del posto si adatta alla fila più affollata (--posti-max),
   così la stessa pianta entra in un telefono e respira su un monitor.
   ========================================= */
.mappa-sala {
	--gap-posti: 6px;
	--lato-max: 46px;
	/* Il lato del posto serve anche al palco, che dev'essere largo quanto
	   la fila: si calcola una volta sola e si eredita. */
	--lato-posto: clamp(18px, calc((100cqw - (var(--posti-max) - 1) * var(--gap-posti)) / var(--posti-max)), var(--lato-max));
	--larghezza-file: calc(var(--posti-max) * var(--lato-posto) + (var(--posti-max) - 1) * var(--gap-posti));
	width: 100%;
	overflow-x: auto;
	padding: 5px 0;
	/* I posti si misurano sulla larghezza di QUESTO riquadro, non della
	   finestra: è l'unico modo perché la pianta stia dentro anche quando
	   il riquadro è più stretto dello schermo (padding, colonne, modali). */
	container-type: inline-size;
}

.mappa-file {
	min-width: min-content;
}

.mappa-fila {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: var(--gap-posti);
}

.palco-riga {
	margin-bottom: 22px;
}

.mappa-file .palco-display {
	width: var(--larghezza-file);
	max-width: 100%;
	margin: 0;
}

.mappa-fila-etichetta {
	width: 70px;
	flex-shrink: 0;
	text-align: right;
	font-size: 0.75rem;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mappa-posti {
	display: flex;
	gap: var(--gap-posti);
	justify-content: center;
}

.mappa-posto {
	/* Ripiego per i browser senza container query: la mappa scorre. */
	width: 34px;
	width: var(--lato-posto);
	aspect-ratio: 1 / 1;
	height: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border-radius: 5px 5px 9px 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(9px, calc(var(--lato-posto) * 0.4), 17px);
	font-weight: bold;
	line-height: 1;
	border: 1px solid transparent;
	user-select: none;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

/* Disponibile */
.mappa-posto.libero {
	background-color: #3a3a3a;
	border-color: #4d4d4d;
	color: #ddd;
	cursor: pointer;
}

.mappa-posto.libero:hover {
	background-color: #4a4a4a;
	transform: translateY(-2px);
}

/* Scelto dall'utente */
.mappa-posto.selezionato {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: #000;
	cursor: pointer;
}

/* Nel carrello di qualcun altro */
.mappa-posto.bloccato {
	background-color: #6b5a1f;
	border-color: #7d6a26;
	color: #d8cba0;
	cursor: not-allowed;
}

/* Venduto */
.mappa-posto.occupato {
	background-color: #5a2020;
	border-color: #6d2727;
	color: #e0b3b3;
	cursor: not-allowed;
}

/* Biglietto già usato all'ingresso */
.mappa-posto.convalidato {
	background-color: #1f4d2a;
	border-color: #266035;
	color: #b6e0c1;
	cursor: not-allowed;
}

/* Varco o corridoio: tiene il posto ma non si vede */
.mappa-posto.vuoto {
	background: none;
	border: none;
	visibility: hidden;
}

.mappa-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #2c2c2c;
	font-size: 0.82rem;
	color: #aaa;
}

.voce-legenda {
	display: flex;
	align-items: center;
	gap: 7px;
}

.mappa-legenda .mappa-posto {
	width: 16px;
	height: 16px;
	aspect-ratio: auto;
	font-size: 0;
	cursor: default;
	border-radius: 3px;
}

.mappa-legenda .mappa-posto:hover {
	transform: none;
}

@media (max-width: 640px) {
	/* Sul telefono l'etichetta della fila ruberebbe spazio ai posti */
	.mappa-fila-etichetta {
		display: none;
	}
	.mappa-sala {
		--gap-posti: 4px;
		--lato-max: 40px;
	}
	.mappa-legenda {
		gap: 10px 14px;
		font-size: 0.76rem;
	}
}

/* =========================================
   PAGINE PUBBLICHE (cartellone e prenotazione)
   ========================================= */
.testata-pubblica {
	position: relative;
	margin: -20px -20px 30px -20px;
	padding: 18px 20px var(--spazio-testata, 78px) 20px;
	overflow: hidden;
	background-color: #0d0d0d;
	border-bottom: 1px solid #2a2a2a;
}

/* Sfumata: il bordo inferiore si perde nel colore della pagina invece di
   tagliare netto. */
.testata-pubblica.sfumata {
	border-bottom: none;
}

/* L'immagine di sfondo del portale, tenuta indietro da un velo scuro */
.sfondo-testata {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: var(--opacita-testata, 0.35);
	filter: blur(var(--sfocatura-testata, 0px));
	/* Un filo più grande, altrimenti la sfocatura scoprirebbe i bordi */
	transform: scale(1.08);
}

.velo-testata {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		var(--velo-testata, rgba(10, 10, 10, 0.75)) 0%,
		var(--velo-testata-forte, rgba(10, 10, 10, 0.88)) 55%,
		var(--velo-testata-forte, rgba(10, 10, 10, 0.88)) 100%);
}

.testata-pubblica.sfumata .velo-testata {
	background: linear-gradient(180deg,
		var(--velo-testata, rgba(10, 10, 10, 0.75)) 0%,
		var(--velo-testata-forte, rgba(10, 10, 10, 0.88)) 55%,
		var(--bg-color) 100%);
}

.contenuto-testata {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.marchio {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--text-color);
	text-decoration: none;
	font-size: 1.05rem;
}

.marchio > i {
	color: var(--accent-color);
	font-size: 1.6rem;
}

.logo-tondo {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	flex-shrink: 0;
	border: 2px solid rgba(212, 175, 55, 0.5);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
	background-color: #111;
}

.logo-tondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nome-teatro strong {
	color: var(--accent-color);
}

/* La fascia grande c'è in tutte le pagine: una sola misura, così passando
   da una all'altra il sito non sussulta. */
.fascia-hero {
	margin-top: 34px;
	text-align: right;
}

.fascia-hero h1 {
	margin: 0;
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -1px;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.fascia-hero p {
	margin: 8px 0 0 0;
	color: #cfcfcf;
	font-size: clamp(0.95rem, 2.4vw, 1.2rem);
}

/* --- Filtri a pillole --- */
.pannello-filtri {
	margin-bottom: 30px;
}

.riga-filtri {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.voce-filtro {
	font-weight: bold;
	color: var(--text-color);
	flex-shrink: 0;
	min-width: 92px;
}

.pillole {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pillola {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 30px;
	border: 1px solid #3a3a3a;
	background-color: #222;
	color: #b9b9b9;
	text-decoration: none;
	font-size: 0.92rem;
	transition: all 0.2s ease;
}

.pillola:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.pillola.attiva {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: #000;
	font-weight: bold;
}

.titolo-pagina {
	margin-bottom: 25px;
}

.titolo-sezione {
	font-size: 1.15rem;
	margin: 30px 0 15px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid #2a2a2a;
}

.link-indietro {
	display: inline-block;
	color: #aaa;
	text-decoration: none;
	margin-bottom: 20px;
	font-size: 0.9rem;
}

.link-indietro:hover {
	color: var(--accent-color);
}

.messaggio-vuoto {
	background-color: var(--card-bg);
	padding: 30px;
	border-radius: 10px;
	text-align: center;
	color: #999;
}

/* --- Filtri del cartellone --- */
.filtri-cartellone {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 25px;
}

.filtri-cartellone select {
	width: auto;
	min-width: 200px;
	flex: 1 1 200px;
	margin: 0;
}

/* --- Griglia del cartellone --- */
.griglia-cartellone {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px;
}

.scheda-spettacolo {
	background-color: var(--card-bg);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--text-color);
	border: 1px solid #262626;
	transition: transform 0.2s ease, border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.scheda-spettacolo:hover {
	transform: translateY(-4px);
	border-color: var(--accent-color);
}

.locandina {
	position: relative;
	aspect-ratio: 3 / 4;
	background-color: #111;
}

.locandina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.locandina-mancante {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-size: 2.5rem;
}

.nastro {
	position: absolute;
	top: 12px;
	right: 0;
	padding: 5px 12px;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 4px 0 0 4px;
}

.nastro-sold-out  { background-color: var(--danger-color); color: #fff; }
.nastro-rimandato { background-color: #b8860b; color: #000; }
.nastro-concluso  { background-color: #444; color: #ddd; }
.nastro-annullato { background-color: #6b1f1f; color: #ffd7d7; }

/* Spettacoli conclusi o annullati: la locandina si spegne, l'etichetta resta leggibile */
.scheda-spettacolo.spenta .locandina img {
	filter: grayscale(100%) blur(2px);
	opacity: 0.55;
}

.scheda-spettacolo.spenta .corpo-scheda h2 {
	color: #9a9a9a;
}

.scheda-spettacolo.spenta:hover {
	transform: none;
	border-color: #333;
}

/* Data in evidenza sulla locandina */
.data-locandina {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background-color: rgba(10, 10, 10, 0.85);
	border: 1px solid rgba(212, 175, 55, 0.55);
	border-radius: 10px;
	padding: 6px 10px;
	text-align: center;
	line-height: 1;
	backdrop-filter: blur(4px);
}

.data-locandina .giorno {
	display: block;
	font-size: 1.35rem;
	font-weight: bold;
	color: var(--accent-color);
}

.data-locandina .mese {
	display: block;
	font-size: 0.65rem;
	letter-spacing: 1px;
	color: #ccc;
	margin-top: 2px;
}

.riga-date {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: auto 0 0 0;
	padding-top: 10px;
}

.data-principale {
	color: #ddd;
	font-size: 0.9rem;
	font-weight: bold;
}

.data-principale i {
	color: var(--accent-color);
	margin-right: 4px;
}

.data-principale .ora {
	color: #999;
	font-weight: normal;
	margin-left: 3px;
}

.data-principale.senza-date {
	color: #888;
	font-weight: normal;
}

.altre-date {
	background-color: rgba(212, 175, 55, 0.15);
	border: 1px solid rgba(212, 175, 55, 0.45);
	color: var(--accent-color);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 0.76rem;
	font-weight: bold;
	white-space: nowrap;
}

.azione-scheda {
	display: block;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #262626;
	color: var(--accent-color);
	font-size: 0.85rem;
	font-weight: bold;
}

.azione-scheda i {
	transition: transform 0.2s ease;
}

.scheda-spettacolo:hover .azione-scheda i {
	transform: translateX(4px);
}

.corpo-scheda {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.corpo-scheda h2 {
	font-size: 1.05rem;
	margin: 0;
	color: var(--text-color);
}

.etichetta-categoria {
	align-self: flex-start;
	background-color: rgba(212, 175, 55, 0.12);
	color: var(--accent-color);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 9px;
	border-radius: 20px;
}

.artista {
	color: #aaa;
	font-size: 0.88rem;
	margin: 0;
}

.quando {
	color: #888;
	font-size: 0.85rem;
	margin: auto 0 0 0;
	padding-top: 8px;
}

.piu-date {
	color: var(--accent-color);
	margin-left: 6px;
}

/* --- Scheda spettacolo --- */
.dettaglio-spettacolo {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 30px;
	align-items: start;
}

/* --- La locandina usata come sfondo ---------------------------------
   Tre strati, uno dentro l'altro, perché le sfumature dei quattro lati
   si sommino senza dover comporre due maschere sullo stesso elemento
   (mask-composite non è ancora ovunque):

     .sfondo-locandina  → maschera verticale (alto e basso)
       .strato-sfondo   → maschera orizzontale (sinistra e destra)
         ::before       → l'immagine, sfocata
         ::after        → il velo colorato

   Il velo sta DENTRO le maschere: se restasse fuori, ai bordi si
   vedrebbe la tinta senza l'immagine sotto. */
.con-sfondo {
	position: relative;
	isolation: isolate;
}

.sfondo-locandina {
	position: absolute;
	inset: var(--sfondo-oltre, 0) 0;
	z-index: -2;
	/* Senza questo lo strato coprirebbe i link che gli stanno sopra:
	   è dietro nel disegno, ma davanti per il puntatore. */
	pointer-events: none;
	-webkit-mask-image: var(--maschera-y, none);
	mask-image: var(--maschera-y, none);
}

.strato-sfondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	-webkit-mask-image: var(--maschera-x, none);
	mask-image: var(--maschera-x, none);
}

.strato-sfondo::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--locandina);
	background-size: cover;
	background-position: center 35%;
	filter: blur(var(--sfocatura, 44px)) saturate(135%) brightness(0.95);
	transform: scale(1.12);
	transform-origin: center;
}

.strato-sfondo::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--velo, rgba(18, 18, 18, 0.55));
}

/* --- La scheda dello spettacolo con lo sfondo --- */
.dettaglio-spettacolo.con-sfondo {
	--sfondo-oltre: -30px;
	padding: 34px 30px 38px 30px;
	margin: 12px 0 10px 0;
	border-radius: 16px;
}

.dettaglio-spettacolo.con-sfondo .locandina-grande {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* --- La scheda nel cartellone con lo sfondo --- */
.scheda-spettacolo.con-sfondo,
.scheda-abbonamento.con-sfondo {
	background-color: transparent;
}

/* =========================================
   ANIMAZIONI DELLA LOCANDINA
   -----------------------------------------
   Cinque animazioni, tutte guidate da tre parametri che si impostano per
   ogni spettacolo: --anim-durata (quanto dura un giro), --anim-ritardo
   (quanto aspetta prima di partire) e --forza (0-1, quanto è ampia).
   La forza entra dentro le calc() dei fotogrammi: le variabili non si
   animano, ma il loro valore viene letto quando l'animazione parte.

   Chi ha chiesto al sistema operativo meno movimento non vede nulla.
   ========================================= */
.con-sfondo,
.senza-sfondo {
	--anim-durata: 18s;
	--anim-ritardo: 0s;
	--forza: 0.5;
}

@keyframes loc-respiro {
	0%, 100% { transform: scale(1.12); }
	50%      { transform: scale(calc(1.12 + 0.22 * var(--forza))); }
}

@keyframes loc-respiro-immagine {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(calc(1 + 0.14 * var(--forza))); }
}

@keyframes loc-deriva {
	0%, 100% { transform: scale(1.18) translateX(calc(-4% * var(--forza))); }
	50%      { transform: scale(1.18) translateX(calc(4% * var(--forza))); }
}

@keyframes loc-deriva-immagine {
	0%, 100% { transform: scale(1.1) translateX(calc(-3.5% * var(--forza))); }
	50%      { transform: scale(1.1) translateX(calc(3.5% * var(--forza))); }
}

@keyframes loc-velo {
	0%, 100% { opacity: 1; }
	50%      { opacity: calc(1 - 0.75 * var(--forza)); }
}

@keyframes loc-velo-immagine {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(calc(1 + 0.35 * var(--forza))); }
}

@keyframes loc-aurora {
	0%   { transform: translate(-18%, -12%) scale(1);    opacity: calc(0.25 + 0.5 * var(--forza)); }
	50%  { transform: translate(16%, 10%)  scale(1.3);   opacity: calc(0.45 + 0.9 * var(--forza)); }
	100% { transform: translate(-18%, -12%) scale(1);    opacity: calc(0.25 + 0.5 * var(--forza)); }
}

/* Il luccichio passa e poi aspetta: la lama attraversa nel primo quinto
   del giro, il resto è pausa. Accorciando la durata passa più spesso. */
@keyframes loc-luccichio {
	0%          { transform: translateX(-140%) rotate(16deg); opacity: 1; }
	18%         { transform: translateX(140%) rotate(16deg);  opacity: 1; }
	18.01%, 100% { transform: translateX(-140%) rotate(16deg); opacity: 0; }
}

/* Respiro, deriva e velo agiscono sullo sfondo se c'è, altrimenti sulla
   locandina vera: l'animazione segue sempre quello che si vede. */
.anim-respiro .strato-sfondo::before { animation: loc-respiro var(--anim-durata) ease-in-out var(--anim-ritardo) infinite; }
.anim-deriva  .strato-sfondo::before { animation: loc-deriva var(--anim-durata) ease-in-out var(--anim-ritardo) infinite; }
.anim-velo    .strato-sfondo::after  { animation: loc-velo var(--anim-durata) ease-in-out var(--anim-ritardo) infinite; }

.anim-respiro.senza-sfondo .locandina img,
.anim-respiro.senza-sfondo .locandina-grande img,
.anim-respiro.senza-sfondo .copertina-abbonamento img { animation: loc-respiro-immagine var(--anim-durata) ease-in-out var(--anim-ritardo) infinite; }
.anim-deriva.senza-sfondo .locandina img,
.anim-deriva.senza-sfondo .locandina-grande img,
.anim-deriva.senza-sfondo .copertina-abbonamento img  { animation: loc-deriva-immagine var(--anim-durata) ease-in-out var(--anim-ritardo) infinite; }
.anim-velo.senza-sfondo .locandina img,
.anim-velo.senza-sfondo .locandina-grande img,
.anim-velo.senza-sfondo .copertina-abbonamento img    { animation: loc-velo-immagine var(--anim-durata) ease-in-out var(--anim-ritardo) infinite; }

/* Aurora e luccichio sono luce che passa sopra la locandina: hanno uno
   strato tutto loro, dentro il riquadro dell'immagine. */
.effetto-luce {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.effetto-luce::before {
	content: '';
	position: absolute;
	inset: -30%;
}

.anim-aurora .effetto-luce::before {
	background: radial-gradient(circle at 50% 50%,
		rgba(212, 175, 55, 0.42) 0%,
		rgba(212, 175, 55, 0.16) 38%,
		transparent 66%);
	animation: loc-aurora var(--anim-durata) ease-in-out var(--anim-ritardo) infinite;
}

.anim-luccichio .effetto-luce::before {
	inset: -60% -10%;
	width: 42%;
	background: linear-gradient(to right,
		transparent 0%,
		rgba(255, 255, 255, calc(0.10 + 0.22 * var(--forza))) 46%,
		rgba(255, 255, 255, calc(0.18 + 0.42 * var(--forza))) 50%,
		rgba(255, 255, 255, calc(0.10 + 0.22 * var(--forza))) 54%,
		transparent 100%);
	animation: loc-luccichio var(--anim-durata) ease-in-out var(--anim-ritardo) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.strato-sfondo::before,
	.strato-sfondo::after,
	.locandina img,
	.locandina-grande img,
	.copertina-abbonamento img,
	.effetto-luce::before {
		animation: none !important;
	}
}


.locandina-grande {
	border-radius: 10px;
	overflow: hidden;
	background-color: #111;
	aspect-ratio: 3 / 4;
}

.locandina-grande img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.testo-spettacolo h1 {
	margin: 10px 0 5px 0;
}

.artista-grande {
	color: #bbb;
	font-size: 1.05rem;
	margin-bottom: 12px;
}

.stagione-riga {
	color: #888;
	font-size: 0.9rem;
	margin-bottom: 15px;
}

.descrizione {
	color: #ddd;
	line-height: 1.7;
}

/* --- Elenco repliche --- */
.elenco-repliche {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.riga-replica {
	display: flex;
	align-items: center;
	gap: 18px;
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	padding: 15px 18px;
}

.riga-replica.esaurita {
	opacity: 0.55;
}

.quando-replica {
	flex-shrink: 0;
	width: 58px;
	text-align: center;
	background-color: #0f0f0f;
	border-radius: 8px;
	padding: 8px 0;
	border: 1px solid #2a2a2a;
}

.quando-replica .giorno {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--accent-color);
	line-height: 1;
}

.quando-replica .mese {
	display: block;
	font-size: 0.7rem;
	color: #999;
	text-transform: uppercase;
}

.dettagli-replica {
	flex: 1;
	min-width: 0;
}

.sotto-dettagli {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: #999;
	font-size: 0.85rem;
	margin-top: 5px;
	align-items: center;
}

.nota-replica {
	color: #777;
	font-size: 0.82rem;
	margin-top: 6px;
	font-style: italic;
}

.azione-replica .btn {
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: 6px;
}

.btn-esaurito {
	background-color: #333;
	color: #777;
	cursor: not-allowed;
}

/* --- Pagina di prenotazione --- */
.intestazione-prenotazione {
	background-color: var(--card-bg);
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 20px;
}

.intestazione-prenotazione h1 {
	margin-bottom: 4px;
	font-size: 1.4rem;
}

.intestazione-prenotazione p {
	color: #bbb;
	margin: 0;
}

.prezzo-riga {
	color: var(--accent-color) !important;
	font-size: 0.92rem;
	margin-top: 6px !important;
}

.blocco-sala,
.blocco-dati {
	background-color: var(--card-bg);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.blocco-sala .titolo-sezione,
.blocco-dati .titolo-sezione {
	margin-top: 0;
}

.nota-sala {
	color: #888;
	font-size: 0.85rem;
	text-align: center;
	margin-top: 15px;
}

.coppia-campi {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.coppia-campi > div {
	flex: 1 1 220px;
}

/* Barra di riepilogo: appiccicata in basso sul telefono */
.barra-riepilogo {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	background-color: #181818;
	border: 1px solid #303030;
	border-radius: 10px;
	padding: 14px 18px;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6);
}

.riepilogo-testo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.posti-scelti {
	color: #ccc;
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.totale-scelto {
	color: var(--accent-color);
	font-size: 1.3rem;
	font-weight: bold;
}

.barra-riepilogo button {
	width: auto;
	margin: 0;
	padding: 12px 26px;
	flex-shrink: 0;
}

.barra-riepilogo button:disabled {
	background-color: #333;
	color: #777;
	cursor: not-allowed;
}

/* --- Riepilogo ordine --- */
.riquadro-conto-rovescia {
	display: flex;
	align-items: center;
	gap: 15px;
	background-color: rgba(212, 175, 55, 0.08);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: 10px;
	padding: 15px 20px;
	margin-bottom: 20px;
}

.riquadro-conto-rovescia i {
	font-size: 1.6rem;
	color: var(--accent-color);
}

.riquadro-conto-rovescia strong {
	display: block;
}

.riquadro-conto-rovescia span {
	color: #bbb;
	font-size: 0.9rem;
}

#conto-rovescia {
	color: var(--accent-color);
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

.scheda-riepilogo {
	background-color: var(--card-bg);
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 20px;
}

.riga-riepilogo {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 0;
	border-bottom: 1px solid #262626;
}

.riga-riepilogo:last-child {
	border-bottom: none;
}

.riga-riepilogo span {
	color: #999;
}

.riga-riepilogo strong {
	text-align: right;
	word-break: break-word;
}

.riga-riepilogo.totale strong {
	color: var(--accent-color);
	font-size: 1.2rem;
}

.codice-ordine {
	font-family: monospace;
	color: #aaa !important;
}

.azioni-riepilogo {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.azioni-riepilogo .btn {
	padding: 12px 22px;
	border-radius: 6px;
}

@media (max-width: 768px) {
	.dettaglio-spettacolo {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.dettaglio-spettacolo.con-sfondo {
		--sfondo-oltre: -18px;
		padding: 24px 18px 28px 18px;
	}
	.locandina-grande {
		max-width: 240px;
		margin: 0 auto;
	}
	.riga-replica {
		flex-wrap: wrap;
		gap: 12px;
	}
	.azione-replica {
		width: 100%;
	}
	.azione-replica .btn {
		display: block;
		width: 100%;
	}
	.griglia-cartellone {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 14px;
	}
	.barra-riepilogo {
		margin: 0 -10px;
		border-radius: 10px 10px 0 0;
	}
	.barra-riepilogo button {
		flex: 1;
	}
	.testata-pubblica {
		margin: -10px -10px 20px -10px;
		padding: 14px 12px;
	}
	.fascia-hero {
		margin-top: 22px;
		text-align: left;
	}
	.testata-pubblica {
		padding-bottom: calc(var(--spazio-testata, 78px) * 0.6);
	}
	.voce-filtro {
		min-width: 0;
		width: 100%;
	}
	.pillola {
		padding: 8px 16px;
		font-size: 0.86rem;
	}
}

/* Avviso di scorrimento della mappa, mostrato solo quando serve davvero */
.suggerimento-scorrimento {
	text-align: center;
	color: var(--accent-color);
	font-size: 0.8rem;
	margin-top: 10px;
}

.mappa-sala.scorrevole .mappa-file {
	/* Sfumature ai bordi: segnalano che la sala continua oltre il bordo */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* =========================================
   INTERRUTTORE A DUE STATI (es. PayPal prova / reale)
   ========================================= */
.interruttore-ambiente {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background-color: #151515;
	border: 1px solid #333;
	border-radius: 10px;
	padding: 5px;
	margin-bottom: 15px;
	max-width: 420px;
}

.interruttore-ambiente input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.interruttore-ambiente label {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 10px;
	border-radius: 7px;
	cursor: pointer;
	color: #777;
	text-align: center;
	transition: color 0.25s ease;
	margin: 0;
}

.interruttore-ambiente label i {
	font-size: 1.15rem;
}

.interruttore-ambiente label span {
	font-weight: bold;
	font-size: 0.95rem;
}

.interruttore-ambiente label small {
	font-size: 0.72rem;
	opacity: 0.8;
}

/* Il cursore che scorre sotto l'etichetta scelta */
.cursore-interruttore {
	position: absolute;
	z-index: 1;
	top: 5px;
	bottom: 5px;
	left: 5px;
	width: calc(50% - 5px);
	border-radius: 7px;
	background-color: #2a4d6e;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

/* Prima opzione scelta: cursore a sinistra (prova) */
.interruttore-ambiente input:first-of-type:checked ~ .cursore-interruttore {
	transform: translateX(0);
	background-color: #2a4d6e;
}

/* Seconda opzione scelta: cursore a destra (reale, in rosso) */
.interruttore-ambiente input:nth-of-type(2):checked ~ .cursore-interruttore {
	transform: translateX(100%);
	background-color: #8a2b2b;
}

.interruttore-ambiente input:checked + label {
	color: #fff;
}

.interruttore-ambiente input:focus-visible + label {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

.interruttore-ambiente label:hover {
	color: #bbb;
}

/* Riquadro del carrello ritrovato tornando indietro */
.riquadro-carrello {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	background-color: rgba(212, 175, 55, 0.08);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: 10px;
	padding: 15px 18px;
	margin-bottom: 20px;
}

.testo-carrello {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1 1 320px;
	color: #ddd;
	font-size: 0.92rem;
}

.testo-carrello > i {
	color: var(--accent-color);
	font-size: 1.3rem;
	margin-top: 2px;
}

.tempo-carrello {
	color: #aaa;
	font-size: 0.85rem;
	margin-top: 5px;
}

.tempo-carrello strong {
	color: var(--accent-color);
	font-variant-numeric: tabular-nums;
}

.riquadro-carrello .btn {
	flex-shrink: 0;
	padding: 9px 16px;
	border-radius: 6px;
}

/* Buono sconto nel riepilogo */
.blocco-coupon {
	background-color: var(--card-bg);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.modulo-coupon {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.modulo-coupon input {
	flex: 1 1 200px;
	margin: 0;
	text-transform: uppercase;
}

.modulo-coupon button {
	width: auto;
	margin: 0;
	padding: 10px 22px;
	flex-shrink: 0;
}

.coupon-applicato {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	background-color: rgba(46, 204, 113, 0.08);
	border: 1px solid rgba(46, 204, 113, 0.35);
	border-radius: 8px;
	padding: 12px 16px;
}

.coupon-applicato .codice {
	font-family: monospace;
	font-size: 1.05rem;
	color: #2ecc71;
	font-weight: bold;
}

.riga-riepilogo.sconto strong {
	color: #2ecc71;
}

/* --- Bottone di pagamento e varianti --- */
.btn-paga {
	background-color: var(--accent-color);
	color: #000;
	font-size: 1.05rem;
	padding: 14px 26px !important;
}

.btn-secondario {
	background-color: #444;
	color: #fff;
}

.btn-secondario:hover {
	background-color: #555;
}

/* --- Conferma della prenotazione --- */
.riquadro-successo {
	display: flex;
	align-items: center;
	gap: 20px;
	background-color: rgba(46, 204, 113, 0.08);
	border: 1px solid rgba(46, 204, 113, 0.35);
	border-radius: 10px;
	padding: 22px;
	margin-bottom: 25px;
}

.riquadro-successo > i {
	font-size: 2.4rem;
	color: #2ecc71;
	flex-shrink: 0;
}

.riquadro-successo h1 {
	margin: 0 0 5px 0;
	font-size: 1.35rem;
}

.riquadro-successo p {
	margin: 0;
	color: #ccc;
}

.elenco-biglietti {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.riga-biglietto {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	padding: 14px 18px;
	text-decoration: none;
	color: var(--text-color);
	transition: border-color 0.2s ease;
}

.riga-biglietto:hover {
	border-color: var(--accent-color);
}

.numero-posto {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 6px 6px 10px 10px;
	background-color: var(--accent-color);
	color: #000;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.testo-biglietto {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.testo-biglietto small {
	color: #999;
	font-size: 0.82rem;
}

.riga-biglietto > i {
	color: var(--accent-color);
	font-size: 1.3rem;
}

/* --- Il biglietto --- */
.biglietto {
	max-width: 480px;
	margin: 0 auto;
	background-color: var(--card-bg);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #2c2c2c;
}

.testata-biglietto {
	padding: 22px;
	text-align: center;
	border-bottom: 2px dashed #333;
}

.biglietto.valido .testata-biglietto { background-color: rgba(46, 204, 113, 0.10); }
.biglietto.usato .testata-biglietto  { background-color: rgba(212, 175, 55, 0.10); }
.biglietto.annullato .testata-biglietto { background-color: rgba(255, 76, 76, 0.10); }

.etichetta-stato {
	display: inline-block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	font-weight: bold;
}

.biglietto.valido .etichetta-stato { color: #2ecc71; }
.biglietto.usato .etichetta-stato  { color: var(--accent-color); }
.biglietto.annullato .etichetta-stato { color: var(--danger-color); }

.testata-biglietto h1 {
	font-size: 1.3rem;
	margin: 0 0 4px 0;
}

.testata-biglietto p {
	margin: 0;
	color: #aaa;
	font-size: 0.9rem;
}

.corpo-biglietto {
	padding: 22px;
}

.dati-biglietto {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 22px;
}

.dati-biglietto > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 15px;
	border-bottom: 1px solid #262626;
	padding-bottom: 10px;
}

.dati-biglietto span {
	color: #888;
	font-size: 0.85rem;
}

.dati-biglietto strong {
	text-align: right;
}

.posto-grande {
	font-size: 1.6rem;
	color: var(--accent-color);
}

.riquadro-qr {
	text-align: center;
	background-color: #fff;
	border-radius: 12px;
	padding: 18px;
}

.riquadro-qr img {
	width: 100%;
	max-width: 260px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.riquadro-qr small {
	display: block;
	margin-top: 10px;
	color: #555;
	font-size: 0.8rem;
}

.pie-biglietto {
	padding: 14px 22px;
	border-top: 1px solid #262626;
	text-align: center;
	color: #666;
	font-family: monospace;
	font-size: 0.78rem;
}

/* Note e indicazioni nei moduli pubblici */
.facoltativo {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
	background-color: #262626;
	padding: 2px 8px;
	border-radius: 20px;
	margin-left: 6px;
	font-weight: normal;
}

.nota-campo {
	color: #999;
	font-size: 0.83rem;
	line-height: 1.5;
	margin: -8px 0 15px 0;
}

.nota-campo i {
	color: var(--accent-color);
	margin-right: 4px;
}

.nota-coupon {
	text-align: center;
	color: var(--accent-color);
	background-color: rgba(212, 175, 55, 0.07);
	border: 1px dashed rgba(212, 175, 55, 0.35);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.88rem;
	margin-top: 12px;
}

.link-documento {
	display: inline-block;
	margin-left: 6px;
	color: var(--accent-color);
	text-decoration: underline;
	white-space: nowrap;
}

/* Allegato già caricato, nel pannello impostazioni */
.allegato-attuale {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background-color: #151515;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 12px 15px;
	margin-bottom: 12px;
}

.allegato-attuale i {
	color: var(--danger-color);
	font-size: 1.2rem;
}

.allegato-attuale a {
	color: var(--accent-color);
	word-break: break-all;
}

.conversione-secondi {
	color: var(--accent-color);
	font-size: 0.85rem;
	margin: -8px 0 8px 0;
}

/* Permessi per mattonella nella scheda utente */
.tabella-permessi {
	background-color: #151515;
	border: 1px solid #2c2c2c;
	border-radius: 8px;
	overflow: hidden;
}

.gruppo-permessi {
	background-color: #1f1f1f;
	padding: 8px 15px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--accent-color);
	border-bottom: 1px solid #2c2c2c;
}

.riga-permesso {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	padding: 10px 15px;
	border-bottom: 1px solid #222;
}

.riga-permesso:last-child {
	border-bottom: none;
}

.nome-voce {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	color: #ddd;
	font-size: 0.92rem;
}

.nome-voce i {
	color: #777;
	width: 18px;
	text-align: center;
}

.stato-ruolo {
	font-size: 0.75rem;
	padding: 2px 8px;
	border-radius: 20px;
}

.stato-ruolo.inclusa {
	color: #2ecc71;
	background-color: rgba(46, 204, 113, 0.1);
}

.stato-ruolo.esclusa {
	color: #888;
	background-color: #222;
}

.scelte-permesso {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.scelte-permesso label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.82rem;
	color: #aaa;
	cursor: pointer;
	margin: 0;
}

.scelte-permesso input[type="radio"] {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--accent-color);
}

/* Area personale: i propri eventi */
.elenco-eventi {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 30px;
}

.scheda-evento {
	display: flex;
	gap: 18px;
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	padding: 16px;
}

/* Il passato si spegne un po', ma resta leggibile: adesso a dirlo c'è
   anche il contrassegno sulla locandina, quindi non serve sbiadirlo. */
.scheda-evento.passato {
	opacity: 0.75;
}

.scheda-evento.passato:hover {
	opacity: 1;
}

.locandina-evento {
	width: 90px;
	flex-shrink: 0;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background-color: #111;
}

.locandina-evento img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dati-evento {
	flex: 1;
	min-width: 0;
}

.dati-evento h3 {
	margin: 0 0 4px 0;
	font-size: 1.1rem;
	color: var(--text-color);
}

.dati-evento .artista {
	color: #aaa;
	font-size: 0.9rem;
	margin: 0 0 8px 0;
}

.quando-evento,
.posti-evento,
.speso-evento {
	color: #999;
	font-size: 0.88rem;
	margin: 3px 0;
}

.quando-evento i,
.posti-evento i,
.speso-evento i {
	color: var(--accent-color);
	width: 16px;
}

.biglietti-evento {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pillola-biglietto {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background-color: rgba(212, 175, 55, 0.12);
	border: 1px solid rgba(212, 175, 55, 0.4);
	color: var(--accent-color);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 0.85rem;
	text-decoration: none;
}

.pillola-biglietto:hover {
	background-color: rgba(212, 175, 55, 0.22);
}

.pillola-biglietto.usato {
	background-color: #222;
	border-color: #3a3a3a;
	color: #888;
}

@media (max-width: 600px) {
	.scheda-evento {
		flex-direction: column;
	}
	.locandina-evento {
		width: 110px;
	}
}

/* Locandina grande spenta (spettacolo concluso o annullato) */
.locandina-grande {
	position: relative;
}

.locandina-grande.spenta img {
	filter: grayscale(100%) blur(2px);
	opacity: 0.55;
}

/* =========================================
   SPORTELLO, MONITORAGGIO E CHECK-IN
   ========================================= */
.riquadri-numeri {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.riquadro-numero {
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	padding: 16px 18px;
	text-align: center;
}

.riquadro-numero .numero {
	display: block;
	font-size: 1.7rem;
	font-weight: bold;
	color: var(--accent-color);
	line-height: 1.1;
}

.riquadro-numero .etichetta {
	display: block;
	color: #999;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 5px;
}

.barra-azioni-monitoraggio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
	background-color: #151515;
	border: 1px solid #2c2c2c;
	border-radius: 10px;
	padding: 15px 18px;
	margin-bottom: 20px;
}

.barra-azioni-monitoraggio button {
	width: auto;
	margin: 0;
	flex-shrink: 0;
}

.filtri-monitoraggio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 20px;
}

.filtri-monitoraggio select,
.filtri-monitoraggio input {
	width: auto;
	min-width: 190px;
	flex: 1 1 190px;
	margin: 0;
}

.filtri-monitoraggio button,
.filtri-monitoraggio .btn {
	width: auto;
	margin: 0;
	flex-shrink: 0;
}

/* I posti di un ordine, in piccolo */
.posti-ordine {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.segno-posto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 5px;
	border-radius: 5px;
	font-size: 0.78rem;
	font-weight: bold;
	background-color: #333;
	color: #ddd;
	border: 1px solid #444;
}

.segno-posto.stato-confermata { background-color: #5a2020; border-color: #6d2727; color: #f0c9c9; }
.segno-posto.stato-temporanea { background-color: #6b5a1f; border-color: #7d6a26; color: #f0e4bd; }
.segno-posto.stato-utilizzato { background-color: #1f4d2a; border-color: #266035; color: #c7ecd2; }
.segno-posto.stato-annullata,
.segno-posto.stato-liberata,
.segno-posto.stato-scaduta   { background-color: #242424; border-color: #333; color: #6d6d6d; text-decoration: line-through; }

/* Riga evidenziata quando si tocca un posto sulla mappa */
.riga-evidenziata {
	animation: lampeggio 1.6s ease;
}

@keyframes lampeggio {
	0%, 100% { background-color: transparent; }
	25%      { background-color: rgba(212, 175, 55, 0.25); }
}

/* Dati del biglietto nella verifica */
.dati-biglietto > div {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 0;
	border-bottom: 1px solid #262626;
}

.dati-biglietto > div:last-child {
	border-bottom: none;
}

.dati-biglietto span {
	color: #999;
}

.dati-biglietto strong {
	text-align: right;
}

.posto-grande {
	font-size: 1.6rem;
	color: var(--accent-color);
}

/* Titoli delle sezioni della dashboard: tutti uguali */
.intestazione-sezione {
	margin-top: 35px;
	margin-bottom: 15px;
	padding-bottom: 8px;
	border-bottom: 1px solid #333;
}

.intestazione-sezione h3 {
	margin: 0;
	color: var(--accent-color);
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	gap: 10px;
}

.intestazione-sezione h3 i {
	color: var(--accent-color);
	width: 24px;
	text-align: center;
}

/* Ordinamento delle sezioni della Dashboard */
.tabella-sezioni {
	background-color: #151515;
	border: 1px solid #2c2c2c;
	border-radius: 8px;
	overflow: hidden;
}

.riga-sezione {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 15px;
	border-bottom: 1px solid #222;
	flex-wrap: wrap;
}

.riga-sezione:last-child {
	border-bottom: none;
}

.icona-sezione {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 8px;
	background-color: #222;
	color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.riga-sezione input[type="text"] {
	flex: 1 1 220px;
	margin: 0;
}

/* Numero di posizione, calcolato dalle frecce e non digitabile */
.posizione-sezione {
	width: 26px;
	flex-shrink: 0;
	text-align: center;
	color: var(--accent-color);
	font-weight: bold;
	font-size: 0.95rem;
}

.frecce-sezione {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

.frecce-sezione button {
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	font-size: 0.8rem;
	background-color: #333;
	color: #ddd;
	border-radius: 6px;
}

.frecce-sezione button:hover:not(:disabled) {
	background-color: var(--accent-color);
	color: #000;
}

.frecce-sezione button:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	background-color: #2a2a2a;
}

/* Lampeggio dopo lo spostamento, per seguire con l'occhio la riga mossa */
.riga-sezione.appena-spostata {
	animation: riga-spostata 0.7s ease;
}

@keyframes riga-spostata {
	0%   { background-color: rgba(212, 175, 55, 0.28); }
	100% { background-color: transparent; }
}

.elenco-ordinabile {
	margin-bottom: 18px;
}

.conteggio-voci {
	color: #777;
	font-size: 0.82rem;
	flex-shrink: 0;
	min-width: 100px;
	text-align: right;
}

@media (max-width: 600px) {
	.conteggio-voci { text-align: left; }
}

/* Paginazione */
.paginazione {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 20px 0 8px 0;
}

.paginazione .passo,
.numeri-pagina a,
.numeri-pagina .pagina-attuale {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid #333;
	background-color: #1e1e1e;
	color: #ccc;
	text-decoration: none;
	font-size: 0.88rem;
}

.paginazione .passo:hover,
.numeri-pagina a:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.paginazione .passo.spento {
	opacity: 0.35;
	pointer-events: none;
}

.numeri-pagina {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.numeri-pagina .pagina-attuale {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: #000;
	font-weight: bold;
}

.numeri-pagina .salto {
	color: #666;
	padding: 0 2px;
}

/* =========================================
   ABBONAMENTI
   ========================================= */
.scelta-repliche {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blocco-spettacolo {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background-color: #151515;
	border: 1px solid #2c2c2c;
	border-radius: 8px;
	padding: 12px 14px;
	flex-wrap: wrap;
}

.testata-spettacolo {
	display: flex;
	gap: 10px;
	align-items: center;
	min-width: 220px;
	flex: 1 1 220px;
}

.testata-spettacolo img {
	width: 44px;
	height: 59px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #333;
	flex-shrink: 0;
}

.date-spettacolo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 2 1 300px;
}

.data-scelta {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #3a3a3a;
	background-color: #1e1e1e;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	margin: 0;
	font-size: 0.9rem;
	transition: all 0.15s ease;
}

.data-scelta:hover { border-color: #666; }

.data-scelta.scelta {
	border-color: var(--accent-color);
	background-color: rgba(212, 175, 55, 0.12);
}

.data-scelta input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--accent-color);
}

.data-scelta small {
	display: block;
	color: #888;
	font-size: 0.76rem;
}

/* --- Richiamo agli abbonamenti nel cartellone --- */
.richiamo-abbonamenti {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.04));
	border: 1px solid rgba(212, 175, 55, 0.45);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 28px;
}

.richiamo-abbonamenti .icona-grande {
	font-size: 2.2rem;
	color: var(--accent-color);
	flex-shrink: 0;
}

.richiamo-abbonamenti .testo {
	flex: 1 1 300px;
}

.richiamo-abbonamenti h2 {
	margin: 0 0 4px 0;
	font-size: 1.25rem;
}

.richiamo-abbonamenti p {
	margin: 0;
	color: #ccc;
	font-size: 0.92rem;
}

.richiamo-abbonamenti .btn {
	padding: 12px 24px;
	border-radius: 30px;
	white-space: nowrap;
}

/* --- Schede degli abbonamenti --- */
.griglia-abbonamenti {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 22px;
}

.scheda-abbonamento {
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--text-color);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.scheda-abbonamento:hover {
	transform: translateY(-4px);
	border-color: var(--accent-color);
}

.copertina-abbonamento {
	aspect-ratio: 16 / 9;
	background-color: #111;
	position: relative;
}

.copertina-abbonamento img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.corpo-abbonamento {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.corpo-abbonamento h3 {
	margin: 0;
	color: var(--text-color);
	font-size: 1.1rem;
}

.prezzo-abbonamento {
	color: var(--accent-color);
	font-size: 1.5rem;
	font-weight: bold;
}

.prezzo-abbonamento small {
	display: block;
	color: #888;
	font-size: 0.78rem;
	font-weight: normal;
}

/* --- Spettacoli inclusi --- */
.griglia-inclusi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.incluso {
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;
	text-align: left;
	padding: 0;
	color: inherit;
	font: inherit;
	width: 100%;
	display: block;
}

.incluso:hover {
	transform: translateY(-3px);
	border-color: var(--accent-color);
}

.incluso .locandina {
	aspect-ratio: 3 / 4;
}

.incluso .dati {
	padding: 10px 12px;
}

.incluso .dati strong {
	display: block;
	font-size: 0.92rem;
	line-height: 1.3;
}

.incluso .dati .quando {
	color: var(--accent-color);
	font-size: 0.82rem;
	margin-top: 4px;
	padding: 0;
}

.incluso .suggerimento {
	color: #777;
	font-size: 0.75rem;
	margin-top: 6px;
}

/* Finestra con la scheda dello spettacolo */
.velo-scheda {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100;
}

.velo-scheda[hidden] { display: none; }

.finestra-scheda {
	background-color: var(--card-bg);
	border: 1px solid #333;
	border-radius: 12px;
	max-width: 760px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 24px;
	position: relative;
}

.chiudi-finestra {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #2a2a2a;
	color: #ddd;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	padding: 0;
	margin: 0;
}

.chiudi-finestra:hover { background-color: var(--danger-color); color: #fff; }

.contenuto-finestra {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.contenuto-finestra img {
	width: 180px;
	border-radius: 8px;
	flex-shrink: 0;
}

.contenuto-finestra .testo { flex: 1 1 300px; }

@media (max-width: 600px) {
	.contenuto-finestra img { width: 130px; margin: 0 auto; }
}

/* Serate comprese in un abbonamento */
.elenco-serate {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.serata-inclusa {
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: #151515;
	border: 1px solid #262626;
	border-radius: 8px;
	padding: 10px 14px;
}

.serata-inclusa > div:nth-child(2) { flex: 1; min-width: 0; }

.quota-serata {
	color: var(--accent-color);
	font-weight: bold;
	white-space: nowrap;
}

/* Le note sotto la dichiarazione di lettura: si leggono, ma restano
   in secondo piano rispetto al pulsante di conferma. */
.note-informative {
	margin: -12px 0 20px 28px;
}

.note-informative p {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #9a9a9a;
	font-size: 0.83rem;
	line-height: 1.55;
}

.note-informative p + p {
	margin-top: 6px;
}

.note-informative i {
	color: var(--accent-color);
	margin-top: 4px;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.note-informative {
		margin-left: 0;
	}
}

/* =========================================
   PANNELLO "ASPETTO DELLA LOCANDINA" (back-office)
   ========================================= */
.pannello-aspetto {
	border: 1px solid #333;
	border-radius: 10px;
	padding: 18px 20px 8px 20px;
	margin: 25px 0;
	background-color: rgba(255, 255, 255, 0.02);
}

.pannello-aspetto legend {
	color: var(--accent-color);
	font-weight: bold;
	padding: 0 8px;
}

.pannello-aspetto .nota-pannello {
	color: #999;
	font-size: 0.85rem;
	line-height: 1.55;
	margin-bottom: 18px;
}

.griglia-aspetto {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.griglia-aspetto > div {
	flex: 1 1 45%;
	min-width: 220px;
}

.riga-colore {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.riga-colore input[type="color"] {
	width: 60px;
	height: 40px;
	padding: 2px;
	margin: 0;
	cursor: pointer;
}

.riga-colore output {
	color: #999;
	font-family: monospace;
	font-size: 0.9rem;
}

.pannello-aspetto input[type="range"] {
	width: 100%;
	margin: 4px 0 6px 0;
	accent-color: var(--accent-color);
}

.pannello-aspetto output {
	color: var(--accent-color);
	font-weight: bold;
}

.riga-lati {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-bottom: 20px;
}

.riga-lati .check-riga {
	margin: 0;
}

.riga-cursore {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.riga-cursore input[type="range"] {
	flex: 1;
	margin: 0;
	accent-color: var(--accent-color);
}

.riga-cursore output {
	color: var(--accent-color);
	font-weight: bold;
	min-width: 48px;
	text-align: right;
}

.griglia-aspetto.tre > div {
	flex: 1 1 30%;
	min-width: 190px;
}

/* Campo con un pulsante accanto (es. il codice del buono da generare) */
.campo-con-tasto {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 8px;
}

.campo-con-tasto input {
	flex: 1;
	margin: 0;
}

.campo-con-tasto .btn {
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Schede di navigazione dentro una pagina (buoni venduti / tagli / ritiri) */
.schede-navigazione {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 25px;
}

/* Tabelle larghe: scorrono da sole invece di sfondare la pagina */
.tabella-scorrevole {
	overflow-x: auto;
	margin-bottom: 20px;
}

.tabella-scorrevole table {
	min-width: 720px;
	margin-bottom: 0;
}

tr.riga-spenta {
	opacity: 0.5;
}

.badge-danger {
	color: var(--danger-color);
	border: 1px solid rgba(255, 76, 76, 0.4);
}

/* =========================================
   EDITOR DELLE AREE SUL MODELLO DEL BUONO
   ========================================= */
.tela-template {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto 22px auto;
	aspect-ratio: var(--proporzione, 1.95);
	border: 1px solid #333;
	border-radius: 8px;
	overflow: hidden;
	background-color: #111;
	touch-action: none;
}

.tela-template img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Il riquadro indica DOVE cade il testo: il centro verticale è la riga */
.area-campo {
	position: absolute;
	transform: translateY(-50%);
	min-height: 26px;
	display: flex;
	align-items: center;
	border: 1px dashed var(--accent-color);
	background-color: rgba(212, 175, 55, 0.14);
	border-radius: 3px;
	cursor: grab;
}

.area-campo.in-uso {
	cursor: grabbing;
	background-color: rgba(212, 175, 55, 0.3);
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
}

.area-campo .testo-area {
	flex: 1;
	padding: 0 4px;
	font-weight: bold;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.area-campo .maniglia {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	background-color: var(--accent-color);
	opacity: 0.75;
	cursor: ew-resize;
}

.area-campo .maniglia.sinistra { left: -5px; border-radius: 3px 0 0 3px; }
.area-campo .maniglia.destra   { right: -5px; border-radius: 0 3px 3px 0; }

.regolazioni-campi {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.regolazione {
	flex: 1 1 22%;
	min-width: 190px;
	background-color: rgba(255, 255, 255, 0.02);
	border: 1px solid #2c2c2c;
	border-radius: 8px;
	padding: 12px 14px;
}

.regolazione h4 {
	color: var(--accent-color);
	font-size: 0.92rem;
	margin-bottom: 8px;
}

.regolazione .riga-colore {
	margin-bottom: 8px;
}

.regolazione select {
	margin: 0;
	padding: 6px 8px;
	font-size: 0.85rem;
}

.regolazione .posizione-campo {
	margin: 0;
	font-family: monospace;
	font-size: 0.76rem;
}

/* Elenco dei modelli */
.griglia-modelli {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.scheda-modello {
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	overflow: hidden;
}

.scheda-modello.spento {
	opacity: 0.55;
}

.scheda-modello img {
	width: 100%;
	display: block;
	background-color: #111;
}

.corpo-modello {
	padding: 14px 16px 16px 16px;
}

.corpo-modello h3 {
	font-size: 1.05rem;
	margin-bottom: 6px;
}

/* =========================================
   BUONI REGALO (pagina pubblica)
   ========================================= */
.intro-buoni {
	color: #bbb;
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 640px;
	margin-bottom: 28px;
}

.griglia-tagli {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 8px;
}

.taglio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.taglio .corpo-taglio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 96px;
	padding: 18px 12px;
	background-color: #232323;
	border: 2px solid #333;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.taglio .corpo-taglio:hover {
	border-color: #555;
	transform: translateY(-2px);
}

.taglio input:checked + .corpo-taglio {
	border-color: var(--accent-color);
	background-color: rgba(212, 175, 55, 0.12);
}

.taglio input:focus-visible + .corpo-taglio {
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}

.taglio .cifra {
	color: var(--accent-color);
	font-size: 1.65rem;
	font-weight: bold;
	line-height: 1;
}

.taglio .etichetta-taglio {
	color: #aaa;
	font-size: 0.83rem;
	text-align: center;
	line-height: 1.35;
}

.griglia-consegna {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.scelta-consegna input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.scelta-consegna .corpo-consegna {
	display: block;
	height: 100%;
	padding: 18px 20px;
	background-color: #232323;
	border: 2px solid #333;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scelta-consegna input:checked + .corpo-consegna {
	border-color: var(--accent-color);
	background-color: rgba(212, 175, 55, 0.1);
}

.scelta-consegna.non-disponibile .corpo-consegna {
	opacity: 0.5;
	cursor: not-allowed;
}

.scelta-consegna .corpo-consegna i {
	color: var(--accent-color);
	font-size: 1.5rem;
	display: block;
	margin-bottom: 10px;
}

.scelta-consegna .corpo-consegna strong {
	display: block;
	color: var(--text-color);
	font-size: 1.05rem;
	margin-bottom: 6px;
}

.scelta-consegna .corpo-consegna span {
	color: #a5a5a5;
	font-size: 0.87rem;
	line-height: 1.55;
}

.blocco-ritiro {
	background-color: rgba(255, 255, 255, 0.02);
	border: 1px solid #2c2c2c;
	border-radius: 10px;
	padding: 18px 20px 6px 20px;
}

.anteprima-cartaceo {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.anteprima-cartaceo img {
	width: 200px;
	max-width: 45%;
	border-radius: 8px;
	border: 1px solid #333;
	display: block;
}

.anteprima-cartaceo p {
	color: #a5a5a5;
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0;
}

/* --- Conferma --- */
.buono-fatto {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.buono-fatto > i {
	color: #4caf50;
	font-size: 2.2rem;
	flex-shrink: 0;
	margin-top: 4px;
}

.buono-fatto h2 {
	margin-bottom: 6px;
	font-size: 1.3rem;
}

.buono-fatto p {
	color: #a5a5a5;
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
}

.riquadro-codice-buono {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 20px;
	background-color: #232323;
	border: 1px solid #333;
	border-radius: 12px;
	text-align: center;
}

.riquadro-codice-buono .etichetta-codice {
	color: #8f8f8f;
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.riquadro-codice-buono .codice-buono {
	color: var(--accent-color);
	font-family: monospace;
	font-size: 1.7rem;
	letter-spacing: 2px;
	word-break: break-all;
}

.riquadro-codice-buono .valore-buono {
	color: var(--text-color);
	font-size: 1.2rem;
	font-weight: bold;
}

.riquadro-codice-buono .scadenza-buono {
	color: #8f8f8f;
	font-size: 0.85rem;
}

.appuntamento-ritiro {
	color: var(--text-color);
	font-size: 1.05rem;
	margin-bottom: 4px;
}

.appuntamento-ritiro i {
	color: var(--accent-color);
	margin-right: 8px;
}

.bottoni-calendario {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 10px 0;
}

/* Il richiamo ai buoni regalo sul cartellone */
.richiamo-buoni {
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(120deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 26px;
	text-decoration: none;
	color: var(--text-color);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.richiamo-buoni:hover {
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

.richiamo-buoni > i {
	color: var(--accent-color);
	font-size: 1.9rem;
	flex-shrink: 0;
}

.richiamo-buoni strong {
	display: block;
	color: var(--accent-color);
	font-size: 1.08rem;
	margin-bottom: 4px;
}

.richiamo-buoni span {
	color: #b5b5b5;
	font-size: 0.9rem;
	line-height: 1.55;
}

@media (max-width: 600px) {
	.anteprima-cartaceo {
		flex-direction: column;
		align-items: flex-start;
	}
	.anteprima-cartaceo img {
		max-width: 100%;
		width: 100%;
	}
	.richiamo-buoni {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* Interruttore di visibilità nelle sezioni del sito pubblico */
.interruttore-sezione {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	cursor: pointer;
}

.interruttore-sezione input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.interruttore-sezione .etichetta-interruttore {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 20px;
	border: 1px solid #3a3a3a;
	background-color: #222;
	color: #777;
	font-size: 0.82rem;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.interruttore-sezione input:checked + .etichetta-interruttore {
	border-color: var(--accent-color);
	background-color: rgba(212, 175, 55, 0.14);
	color: var(--accent-color);
}

.interruttore-sezione input:focus-visible + .etichetta-interruttore {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

/* Una sezione spenta si riconosce a colpo d'occhio, ma resta leggibile */
.riga-sezione.sezione-spenta .icona-sezione,
.riga-sezione.sezione-spenta input[type="text"] {
	opacity: 0.5;
}

/* =========================================
   TABELLE MODIFICABILI (tagli, finestre di ritiro)
   -----------------------------------------
   I campi riempiono la cella e i pulsanti restano visibili: prima ogni
   riga aveva un <form> dentro il <tr>, HTML non valido, e il browser
   lo spostava fuori dalla tabella portandosi via i pulsanti.
   ========================================= */
.tabella-modificabile input[type="text"],
.tabella-modificabile input[type="number"],
.tabella-modificabile input[type="date"],
.tabella-modificabile input[type="time"] {
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	font-size: 0.88rem;
}

.tabella-modificabile td {
	vertical-align: middle;
	padding: 10px 12px;
}

.tabella-modificabile .coppia-orari {
	display: flex;
	gap: 8px;
}

.tabella-modificabile .btn-small {
	margin: 0;
}

.conteggio-prenotati {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 20px;
	background-color: #262626;
	border: 1px solid #3a3a3a;
	color: #bbb;
	font-size: 0.85rem;
	white-space: nowrap;
}

.conteggio-prenotati.al-completo {
	border-color: rgba(255, 76, 76, 0.5);
	color: var(--danger-color);
}

/* Su schermo stretto la tabella diventa un elenco di schede: le
   intestazioni tornano davanti a ogni campo. */
@media (max-width: 780px) {
	.tabella-modificabile,
	.tabella-modificabile thead,
	.tabella-modificabile tbody,
	.tabella-modificabile tr,
	.tabella-modificabile td {
		display: block;
		width: auto;
	}

	/* Serve la stessa forza di «.tabella-scorrevole table», che imporrebbe
	   una larghezza minima di 720px anche alla tabella diventata schede. */
	.tabella-scorrevole .tabella-modificabile {
		min-width: 0;
	}

	.tabella-modificabile thead {
		display: none;
	}

	.tabella-modificabile tr {
		background-color: #1a1a1a;
		border: 1px solid #2c2c2c;
		border-radius: 10px;
		padding: 6px 4px;
		margin-bottom: 14px;
	}

	.tabella-modificabile td {
		display: flex;
		align-items: center;
		gap: 12px;
		border: none;
		padding: 7px 12px;
	}

	.tabella-modificabile td::before {
		content: attr(data-etichetta);
		flex: 0 0 108px;
		color: #8f8f8f;
		font-size: 0.8rem;
	}

	.tabella-scorrevole {
		overflow-x: visible;
	}
}

/* =========================================
   PULSANTI DI CONTATTO (WhatsApp, chiamata, email)
   -----------------------------------------
   Restano nella famiglia oro del portale: solo WhatsApp porta un accenno
   del proprio verde sul bordo, quel tanto che basta a riconoscerlo senza
   spezzare la tavolozza.
   ========================================= */
.blocco-contatti {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #2c2c2c;
}

.titolo-contatti {
	color: #a5a5a5;
	font-size: 0.92rem;
	margin-bottom: 12px;
}

.titolo-contatti i {
	color: var(--accent-color);
	margin-right: 7px;
}

.pulsanti-contatto {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pulsanti-contatto .btn {
	background-color: #262626;
	color: var(--text-color);
	border: 1px solid #3a3a3a;
	margin: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.pulsanti-contatto .btn:hover {
	background-color: #2f2f2f;
	border-color: var(--accent-color);
	color: var(--accent-color);
	transform: translateY(-1px);
}

.pulsanti-contatto .btn i {
	margin-right: 7px;
}

.contatto-whatsapp {
	border-color: rgba(37, 211, 102, 0.45) !important;
}

.contatto-whatsapp i {
	color: #25d366;
}

.contatto-whatsapp:hover {
	border-color: #25d366 !important;
	color: #25d366 !important;
}

.contatto-whatsapp:hover i {
	color: #25d366;
}

.contatto-telefono i,
.contatto-email i {
	color: var(--accent-color);
}

/* L'associazione, in fondo alle pagine pubbliche */
.associazione-pie {
	color: #6f6f6f;
	font-size: 0.82rem;
	margin-top: 4px;
}

/* =========================================
   CONSOLE SQL
   ========================================= */
.griglia-console {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 24px;
	align-items: start;
}

.colonna-editor textarea#sql {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92rem;
	line-height: 1.6;
	tab-size: 4;
	background-color: #0e0e0e;
	border-color: #333;
	resize: vertical;
	margin-bottom: 12px;
}

.colonna-editor textarea#sql:focus {
	border-color: var(--accent-color);
}

.barra-console {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 4px;
}

.barra-console .gruppo-bottoni {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* La regola generale dà ai pulsanti larghezza piena: qui devono stare
   in fila, quindi ognuno si prende solo lo spazio che gli serve. */
.barra-console button,
.barra-console .btn,
.azioni-conferma button,
.azioni-conferma .btn,
.corpo-costruttore .gruppo-bottoni button,
.corpo-costruttore .gruppo-bottoni .btn,
#cq-aggiungi-condizione {
	width: auto;
	margin: 0;
}

.corpo-costruttore .gruppo-bottoni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.campo-limite {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #999;
	font-size: 0.85rem;
	white-space: nowrap;
}

.campo-limite input {
	width: 90px;
	margin: 0;
	padding: 8px 10px;
}

/* --- Esito --- */
.riquadro-risultato {
	margin-top: 26px;
}

.riga-esito {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding: 12px 16px;
	background-color: #1a1a1a;
	border: 1px solid #2c2c2c;
	border-radius: 8px 8px 0 0;
	border-bottom: none;
	font-size: 0.88rem;
}

.riga-esito .esito-ok {
	color: #4caf50;
	font-weight: bold;
}

.riga-esito .esito-tempo,
.riga-esito .esito-nota {
	color: #8f8f8f;
}

.riga-esito i {
	margin-right: 6px;
}

.tabella-risultato {
	border: 1px solid #2c2c2c;
	border-radius: 0 0 8px 8px;
	margin-bottom: 0;
	max-height: 70vh;
	overflow: auto;
}

.tabella-risultato table {
	margin-bottom: 0;
	font-size: 0.87rem;
}

.tabella-risultato thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #202020;
	white-space: nowrap;
}

.tabella-risultato td {
	vertical-align: top;
	max-width: 380px;
	word-break: break-word;
}

.colonna-indice {
	width: 46px;
	color: #666;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.valore-nullo {
	color: #6b6b6b;
	font-style: italic;
}

.valore-vuoto {
	color: #4f4f4f;
	font-size: 0.85em;
}

.errore-sql {
	margin-top: 10px;
	padding: 12px 14px;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.86rem;
	white-space: pre-wrap;
	word-break: break-word;
	color: #ffd9d9;
}

/* --- Conferma prima di modificare --- */
.pannello-conferma {
	background-color: #1d1a12;
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-left: 4px solid var(--accent-color);
	border-radius: 10px;
	padding: 22px 26px;
	margin-bottom: 26px;
}

.pannello-conferma.grave {
	background-color: #201313;
	border-color: rgba(255, 76, 76, 0.55);
	border-left-color: var(--danger-color);
}

.pannello-conferma h3 {
	margin-bottom: 16px;
	font-size: 1.15rem;
}

.pannello-conferma.grave h3 {
	color: var(--danger-color);
}

.sql-conferma {
	background-color: #0e0e0e;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	color: #e8e8e8;
	margin-bottom: 18px;
}

.elenco-avvertenze {
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0;
}

.elenco-avvertenze li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 0;
	color: #c5c5c5;
	font-size: 0.92rem;
	line-height: 1.55;
}

.elenco-avvertenze li i {
	color: var(--accent-color);
	margin-top: 4px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
}

.elenco-avvertenze .avvertenza-forte {
	color: #ffc9c9;
}

.elenco-avvertenze .avvertenza-forte i {
	color: var(--danger-color);
}

.azioni-conferma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.azioni-conferma button,
.azioni-conferma .btn {
	margin: 0;
}

/* --- Query pronte, nella colonna a fianco --- */
.colonna-salvate {
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	padding: 18px 18px 8px 18px;
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.titolo-colonna {
	font-size: 1.02rem;
	margin-bottom: 4px;
}

.gruppo-salvate {
	margin-bottom: 18px;
}

.gruppo-salvate h4 {
	color: #8f8f8f;
	font-size: 0.74rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding-bottom: 6px;
	margin-bottom: 8px;
	border-bottom: 1px solid #2a2a2a;
}

.voce-salvata {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin-bottom: 6px;
}

.titolo-salvata {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 9px 11px;
	text-align: left;
	background-color: #202020;
	border: 1px solid #2e2e2e;
	border-radius: 7px;
	color: var(--text-color);
	cursor: pointer;
	font-size: 0.85rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.titolo-salvata:hover {
	background-color: #262626;
	border-color: var(--accent-color);
}

.titolo-salvata strong {
	display: block;
	font-weight: 600;
}

.titolo-salvata em {
	display: block;
	color: #8a8a8a;
	font-style: normal;
	font-size: 0.79rem;
	margin-top: 2px;
}

.titolo-salvata .preferita {
	color: var(--accent-color);
	margin-top: 2px;
}

.titolo-salvata .avviso {
	color: var(--danger-color);
	margin-top: 2px;
}

.voce-salvata.scrive .titolo-salvata {
	border-left: 3px solid rgba(255, 76, 76, 0.6);
}

.esegui-salvata {
	margin: 0;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* --- Registro --- */
.sql-registro {
	display: block;
	margin-top: 4px;
	color: #9a9a9a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.79rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

tr.riga-errore {
	background-color: rgba(255, 76, 76, 0.06);
}

.errore-registro {
	margin-top: 6px;
	color: #ff9c9c;
	font-size: 0.8rem;
}

.stella-accesa { color: var(--accent-color); }
.stella-spenta { color: #3a3a3a; }

/* =========================================
   COSTRUTTORE GRAFICO DI QUERY
   ========================================= */
.costruttore {
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-radius: 10px;
	margin-bottom: 26px;
}

.costruttore > summary {
	padding: 15px 20px;
	cursor: pointer;
	color: var(--accent-color);
	font-weight: bold;
	list-style: none;
}

.costruttore > summary::-webkit-details-marker { display: none; }

.costruttore > summary::after {
	content: '\f107';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	float: right;
	transition: transform 0.2s ease;
}

.costruttore[open] > summary::after {
	transform: rotate(180deg);
}

.costruttore > summary i {
	margin-right: 9px;
}

.corpo-costruttore {
	padding: 4px 20px 20px 20px;
	border-top: 1px solid #262626;
}

.riga-costruttore {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* Il «display: flex» qui sopra batte il display:none del browser per
   [hidden]: senza questa riga la fila dell'unione resta visibile. */
.riga-costruttore[hidden] {
	display: none;
}

.campo-costruttore {
	flex: 1 1 100%;
	min-width: 180px;
}

.campo-costruttore.larghezza-media   { flex: 1 1 45%; }
.campo-costruttore.larghezza-stretta { flex: 1 1 130px; max-width: 200px; }

.campo-costruttore select,
.campo-costruttore input {
	margin-bottom: 14px;
}

.elenco-colonne {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	max-height: 190px;
	overflow-y: auto;
	padding: 12px;
	background-color: #161616;
	border: 1px solid #2c2c2c;
	border-radius: 8px;
	margin-bottom: 16px;
}

.casella-colonna {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 11px;
	background-color: #222;
	border: 1px solid #333;
	border-radius: 18px;
	cursor: pointer;
	font-size: 0.82rem;
	white-space: nowrap;
}

.casella-colonna:hover {
	border-color: #4a4a4a;
}

.casella-colonna input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--accent-color);
}

.casella-colonna:has(input:checked) {
	border-color: var(--accent-color);
	background-color: rgba(212, 175, 55, 0.12);
	color: var(--accent-color);
}

.casella-colonna.tutte {
	font-weight: bold;
}

.riga-condizione {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
}

.riga-condizione select,
.riga-condizione input {
	margin: 0;
	padding: 8px 10px;
	font-size: 0.86rem;
}

.riga-condizione .cq-congiunzione     { flex: 0 0 92px; }
.riga-condizione .cq-cond-colonna     { flex: 1 1 170px; }
.riga-condizione .cq-cond-operatore   { flex: 1 1 150px; }
.riga-condizione .cq-cond-valore,
.riga-condizione .cq-cond-valore2     { flex: 1 1 140px; }
.riga-condizione .btn                 { margin: 0; width: auto; flex: 0 0 auto; }

.anteprima-query {
	background-color: #0e0e0e;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.86rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	color: #cfcfcf;
}

@media (max-width: 1000px) {
	.griglia-console {
		grid-template-columns: 1fr;
	}
	.colonna-salvate {
		position: static;
		max-height: none;
		order: -1;
	}
}

/* =========================================
   GRUPPI UTENTI
   ========================================= */
.badge-gruppo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	margin: 2px 4px 2px 0;
	border-radius: 20px;
	border: 1px solid color-mix(in srgb, var(--colore-gruppo, #d4af37) 55%, transparent);
	background-color: color-mix(in srgb, var(--colore-gruppo, #d4af37) 14%, transparent);
	color: var(--colore-gruppo, #d4af37);
	font-size: 0.74rem;
	white-space: nowrap;
}

/* I browser senza color-mix mostrano comunque un contrassegno leggibile */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.badge-gruppo {
		border-color: #444;
		background-color: #222;
	}
}

.gruppi-riga {
	margin-top: 5px;
}

/* --- Scelta dei gruppi nella scheda utente --- */
.scelta-gruppi {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 18px;
}

.casella-gruppo {
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.casella-gruppo input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.casella-gruppo span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 22px;
	border: 1px solid #3a3a3a;
	background-color: #222;
	color: #888;
	font-size: 0.87rem;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.casella-gruppo:hover span {
	border-color: #555;
	color: #bbb;
}

.casella-gruppo input:checked + span {
	border-color: var(--colore-gruppo, #d4af37);
	background-color: color-mix(in srgb, var(--colore-gruppo, #d4af37) 16%, transparent);
	color: var(--colore-gruppo, #d4af37);
}

.casella-gruppo input:focus-visible + span {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

/* --- Filtro per gruppo sopra l'elenco --- */
.filtri-gruppo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.filtri-gruppo .pillola {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.filtri-gruppo .pillola .quanti {
	padding: 1px 8px;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.35);
	font-size: 0.78rem;
}

.filtri-gruppo .pillola.attiva .quanti {
	background-color: rgba(0, 0, 0, 0.25);
}

/* --- Elenco dei gruppi --- */
.griglia-gruppi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
}

.scheda-gruppo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: var(--card-bg);
	border: 1px solid #262626;
	border-left: 4px solid var(--colore-gruppo, #d4af37);
	border-radius: 10px;
	padding: 18px 20px;
}

.testata-gruppo {
	display: flex;
	align-items: center;
	gap: 14px;
}

.icona-gruppo {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--colore-gruppo, #d4af37) 18%, transparent);
	color: var(--colore-gruppo, #d4af37);
	font-size: 1.2rem;
}

.testata-gruppo h3 {
	margin: 0;
	font-size: 1.05rem;
	color: var(--text-color);
}

.etichetta-sistema {
	color: #7f7f7f;
	font-size: 0.74rem;
}

.descrizione-gruppo {
	color: #9a9a9a;
	font-size: 0.87rem;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.conteggio-gruppo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--colore-gruppo, #d4af37);
	text-decoration: none;
	font-size: 0.9rem;
}

.conteggio-gruppo strong {
	font-size: 1.25rem;
}

.conteggio-gruppo:hover {
	text-decoration: underline;
}

.scheda-gruppo .gruppo-bottoni {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.scheda-gruppo .btn {
	margin: 0;
	width: auto;
}

.btn.disabilitato {
	opacity: 0.35;
	cursor: not-allowed;
	background-color: #333;
	color: #888;
}

.anteprima-badge {
	display: flex;
	align-items: center;
	min-height: 42px;
}

/* --- «Intestato a» nell'area personale --- */
.intestato-a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 8px 0 4px 0;
	padding: 8px 12px;
	border-left: 2px solid var(--accent-color);
	background-color: rgba(255, 255, 255, 0.03);
	border-radius: 0 6px 6px 0;
	color: #b5b5b5;
	font-size: 0.88rem;
	line-height: 1.5;
}

.intestato-a i {
	color: var(--accent-color);
}

.intestato-a strong {
	color: var(--text-color);
}

.intestato-a .posto-intestato {
	color: #8a8a8a;
	font-size: 0.8rem;
	margin-left: 5px;
}

/* =========================================
   PAGINAZIONE
   ========================================= */
.paginazione {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 22px 0 10px 0;
}

.paginazione a,
.paginazione span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	justify-content: center;
	border: 1px solid #3a3a3a;
	border-radius: 8px;
	background-color: #222;
	color: var(--text-color);
	text-decoration: none;
	font-size: 0.9rem;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.paginazione a:hover {
	background-color: #2e2e2e;
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.paginazione .numero.attuale {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: #111;
	font-weight: bold;
}

.paginazione .puntini {
	border: none;
	background: none;
	min-width: 22px;
	padding: 0;
	color: #666;
}

.paginazione .spento {
	opacity: 0.3;
	cursor: default;
}

.conteggio-pagine {
	text-align: center;
	color: #8a8a8a;
	font-size: 0.84rem;
	margin-top: 18px;
}

/* Sul telefono spariscono le parole: restano le frecce e i numeri */
@media (max-width: 560px) {
	.paginazione .parola {
		display: none;
	}
	.paginazione a,
	.paginazione span {
		min-width: 36px;
		height: 36px;
		padding: 0 9px;
		font-size: 0.85rem;
	}
}

/* =========================================
   CRONOLOGIA EVENTI (scheda utente e area personale)
   ========================================= */
/* «display» dichiarato qui batte il display:none che il browser dà agli
   elementi [hidden]: senza questa riga le due schede si vedono insieme. */
.elenco-eventi[hidden] {
	display: none;
}

.cronologia .schede-navigazione {
	align-items: center;
	margin-bottom: 20px;
}

/* Le schede sono <button>: la regola generale darebbe loro tutta la
   larghezza, e finirebbero una sotto l'altra. */
.cronologia .schede-navigazione .pillola {
	width: auto;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #3a3a3a;
	font-weight: normal;
}

.cronologia .schede-navigazione .pillola .quanti {
	padding: 1px 9px;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.35);
	font-size: 0.78rem;
}

.riassunto-cronologia {
	margin-left: auto;
	color: #8a8a8a;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* Il contrassegno sulla locandina: vissuto o da vivere, a colpo d'occhio */
.segno-tempo {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 5px 8px;
	background-color: rgba(212, 175, 55, 0.92);
	color: #111;
	font-size: 0.68rem;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.segno-tempo.vissuto {
	background-color: rgba(90, 90, 90, 0.92);
	color: #e8e8e8;
}

.scheda-evento .locandina-evento {
	position: relative;
}

@media (max-width: 620px) {
	.riassunto-cronologia {
		margin-left: 0;
		width: 100%;
		white-space: normal;
	}
}

/* =========================================
   INGRESSO IN SALA
   ========================================= */

/* --- Il campo della pistola --- */
.barra-scansione {
	background-color: var(--card-bg);
	border: 1px solid #2c2c2c;
	border-radius: 12px;
	padding: 14px 16px 10px;
	margin-bottom: 18px;
}

.barra-scansione.grande {
	padding: 34px 24px 18px;
	text-align: center;
	border-color: rgba(212, 175, 55, 0.35);
	background:
		radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.10), transparent 60%),
		var(--card-bg);
}

.icona-scansione {
	font-size: 3.2rem;
	color: var(--accent-color);
	line-height: 1;
	margin-bottom: 12px;
}

.titolo-scansione {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 4px;
}

.sottotitolo-scansione {
	color: #999;
	margin-bottom: 22px;
}

.riga-scansione {
	position: relative;
	display: flex;
	gap: 10px;
	max-width: 760px;
	margin: 0 auto;
}

.riga-scansione > .fa {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #777;
	pointer-events: none;
}

.riga-scansione input {
	flex: 1;
	margin: 0;
	padding: 14px 14px 14px 44px;
	font-size: 1.1rem;
	border-radius: 8px;
	border: 2px solid #333;
	background-color: #151515;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.barra-scansione.grande .riga-scansione input {
	font-size: 1.3rem;
	padding-top: 18px;
	padding-bottom: 18px;
}

.riga-scansione input:focus {
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.riga-scansione button {
	width: auto;
	margin: 0;
	padding: 0 22px;
	border-radius: 8px;
	flex-shrink: 0;
}

.piede-scansione {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	max-width: 760px;
	margin: 10px auto 0;
	font-size: 0.82rem;
	color: #888;
}

/* La spia dice all'operatore se la pistola sta scrivendo nel posto giusto */
.spia-scansione .pronta { display: none; color: #2ecc71; }
.spia-scansione .pronta .fa { font-size: 0.6rem; vertical-align: 2px; animation: spia-accesa 1.6s ease-in-out infinite; }
.spia-scansione .ferma { color: #888; }
.barra-scansione:focus-within .spia-scansione .pronta { display: inline; }
.barra-scansione:focus-within .spia-scansione .ferma { display: none; }

@keyframes spia-accesa {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

.scelta-passate {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
}

.scelta-passate input {
	width: auto;
	margin: 0;
}

.nota-ricerca {
	color: #999;
	margin: 0 0 18px;
	text-align: center;
}

.nota-ricerca a {
	color: var(--accent-color);
}

.nota-ricerca .btn {
	width: auto;
	background-color: #333;
	color: #eee;
}

/* --- Esiti e avvisi, grandi: si leggono con la fila davanti --- */
.esito-ingresso {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 14px;
	font-size: 1.02rem;
	border: 1px solid;
}

.esito-ingresso > .fa {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.esito-ingresso.ok         { background-color: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.45); color: #b8f0cc; }
.esito-ingresso.ok > .fa   { color: #2ecc71; }
.esito-ingresso.attenzione { background-color: rgba(230, 160, 40, 0.12); border-color: rgba(230, 160, 40, 0.5); color: #f5d9a8; }
.esito-ingresso.attenzione > .fa { color: #e6a028; }
.esito-ingresso.ko         { background-color: rgba(255, 76, 76, 0.12); border-color: rgba(255, 76, 76, 0.5); color: #ffc9c9; }
.esito-ingresso.ko > .fa   { color: var(--danger-color); }
.esito-ingresso.info       { background-color: rgba(52, 152, 219, 0.12); border-color: rgba(52, 152, 219, 0.45); color: #c4e1f5; }
.esito-ingresso.info > .fa { color: #3498db; }
.esito-ingresso.incasso    { background-color: rgba(212, 175, 55, 0.14); border-color: var(--accent-color); color: #f3e3ad; }
.esito-ingresso.incasso > .fa { color: var(--accent-color); }

/* --- La finestra di scelta --- */
.finestra-scelta {
	width: min(760px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	margin: auto;
	padding: 0;
	border: 1px solid #333;
	border-radius: 14px;
	background-color: #181818;
	color: var(--text-color);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}

.finestra-scelta[open] {
	display: flex;
	flex-direction: column;
}

.finestra-scelta::backdrop {
	background-color: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(3px);
}

.testa-scelta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 16px 20px 0;
}

.testa-scelta h3 {
	margin: 0;
	font-size: 1.3rem;
}

.testa-scelta form {
	margin: 0;
}

.chiudi-scelta {
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-color: #2a2a2a;
	color: #ccc;
}

.chiudi-scelta:hover {
	background-color: #3a3a3a;
}

.testo-scelta {
	color: #aaa;
	padding: 6px 20px 14px;
	border-bottom: 1px solid #2a2a2a;
}

.elenco-scelta {
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.voce-scelta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px 10px 10px;
	border-radius: 10px;
	background-color: #222;
	border: 1px solid #2e2e2e;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.voce-scelta:hover,
.voce-scelta:focus-visible {
	outline: none;
	border-color: var(--accent-color);
	background-color: #282318;
}

.voce-scelta.oggi {
	border-color: rgba(212, 175, 55, 0.45);
}

.voce-scelta.passata {
	opacity: 0.65;
}

.locandina-scelta {
	width: 54px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background-color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
	font-size: 1.4rem;
}

.locandina-scelta img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dati-scelta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.dati-scelta strong {
	font-size: 1.05rem;
	color: var(--accent-color);
}

.quando-scelta,
.chi-scelta {
	font-size: 0.86rem;
	color: #ccc;
}

.chi-scelta small {
	color: #888;
	margin-left: 6px;
}

.badge-quando {
	display: inline-block;
	padding: 1px 8px;
	margin-right: 6px;
	border-radius: 20px;
	font-size: 0.72rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background-color: #333;
	color: #bbb;
	vertical-align: 1px;
}

.badge-quando.oggi    { background-color: var(--accent-color); color: #111; }
.badge-quando.futura  { background-color: rgba(52, 152, 219, 0.2); color: #8cc6ee; }
.badge-quando.passata { background-color: #2e2e2e; color: #888; }

.conti-scelta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	flex-shrink: 0;
	gap: 2px;
}

.conti-scelta .conto {
	font-size: 0.92rem;
	color: #eee;
	white-space: nowrap;
}

.conti-scelta .conto b {
	font-size: 1.25rem;
	color: var(--accent-color);
}

.conti-scelta .conto.completo   { color: #2ecc71; }
.conti-scelta .conto.non-valido { color: var(--danger-color); }

.conti-scelta small {
	color: #888;
	font-size: 0.78rem;
	white-space: nowrap;
}

.freccia-scelta {
	color: #555;
}

/* --- La scheda dello spettatore --- */
.scheda-ingresso {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: 22px;
	align-items: center;
	background-color: var(--card-bg);
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 14px;
}

.locandina-ingresso {
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background-color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
	font-size: 2.4rem;
}

.locandina-ingresso img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dati-ingresso {
	min-width: 0;
}

.spettacolo-ingresso {
	font-size: 1.35rem;
	font-weight: bold;
	color: var(--accent-color);
	line-height: 1.25;
}

.data-ingresso {
	font-size: 1.05rem;
	color: #ddd;
	margin: 4px 0 12px;
}

.nome-ingresso {
	font-size: 1.9rem;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.contatti-ingresso {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	color: #999;
	font-size: 0.86rem;
}

.contatti-ingresso .fa {
	color: #666;
	margin-right: 3px;
}

.conti-ingresso {
	display: flex;
	gap: 10px;
}

.conti-ingresso > div {
	min-width: 86px;
	padding: 12px 10px;
	border-radius: 10px;
	background-color: #161616;
	border: 1px solid #2a2a2a;
	text-align: center;
}

.conti-ingresso b {
	display: block;
	font-size: 2rem;
	line-height: 1;
	color: #eee;
}

.conti-ingresso span {
	display: block;
	margin-top: 6px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #888;
}

.conti-ingresso .entrati b { color: #2ecc71; }
.conti-ingresso .attesi b  { color: var(--accent-color); }

.altro-ordine {
	background-color: rgba(52, 152, 219, 0.08);
	border: 1px dashed rgba(52, 152, 219, 0.4);
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 14px;
	color: #c4e1f5;
	font-size: 0.92rem;
}

.altro-ordine a {
	color: #8cc6ee;
	font-weight: bold;
	margin-left: 6px;
}

/* --- I posti, in grande --- */
.testa-posti {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	border-bottom: 1px solid #2a2a2a;
	margin: 26px 0 16px;
	padding-bottom: 8px;
}

.testa-posti .titolo-sezione {
	margin: 0;
	padding: 0;
	border: none;
}

.testa-posti .btn {
	width: auto;
	margin: 0;
	background-color: #333;
	color: #eee;
}

.posti-ingresso {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 12px;
}

.tessera-posto {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 150px;
	padding: 14px 8px 12px;
	border-radius: 12px 12px 20px 20px;
	border: 2px solid #3a3a3a;
	background-color: #222;
	text-align: center;
	overflow: hidden;
	user-select: none;
	transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.tessera-posto input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.fila-tessera {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #999;
	min-height: 1.1em;
}

.numero-tessera {
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1;
	color: #f2f2f2;
}

.stato-tessera {
	font-size: 0.8rem;
	color: #aaa;
	margin-top: 4px;
}

.chi-tessera {
	font-size: 0.7rem;
	color: #6f9c7b;
}

/* Da far entrare: si tocca */
.tessera-posto.da-entrare {
	cursor: pointer;
	border-style: dashed;
	border-color: #555;
}

.tessera-posto.da-entrare:hover {
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

.tessera-posto.da-entrare:focus-within {
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}

.tessera-posto .scelto { display: none; }

.tessera-posto.da-entrare:has(input:checked) {
	border-style: solid;
	border-color: var(--accent-color);
	background-color: var(--accent-color);
}

.tessera-posto.da-entrare:has(input:checked) .numero-tessera,
.tessera-posto.da-entrare:has(input:checked) .fila-tessera,
.tessera-posto.da-entrare:has(input:checked) .stato-tessera {
	color: #111;
}

.tessera-posto.da-entrare:has(input:checked) .scelto     { display: inline; font-weight: bold; }
.tessera-posto.da-entrare:has(input:checked) .non-scelto { display: none; }

/* Già entrato: si vede, ma non si tocca */
.tessera-posto.entrato {
	background-color: #1a3321;
	border-color: #266035;
}

.tessera-posto.entrato .numero-tessera { color: #7fcf97; }
.tessera-posto.entrato .stato-tessera  { color: #9fd5ae; }
.tessera-posto.entrato .fila-tessera   { color: #6f9c7b; }

.tessera-posto.entrato.appena {
	animation: appena-entrato 1.4s ease;
}

@keyframes appena-entrato {
	0%   { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
	40%  { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
	100% { transform: scale(1); }
}

.annulla-tessera {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.35);
	color: #9fd5ae;
	font-size: 0.8rem;
	opacity: 0.55;
}

.annulla-tessera:hover {
	opacity: 1;
	background-color: #555;
	color: #fff;
}

/* Il posto che corrisponde al QR appena letto */
.nastro-tessera {
	position: absolute;
	top: 9px;
	left: -26px;
	transform: rotate(-35deg);
	width: 100px;
	padding: 1px 0;
	font-size: 0.6rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: #3498db;
	color: #fff;
}

.posti-non-validi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	color: #999;
	font-size: 0.86rem;
}

/* La barra resta attaccata al fondo dello schermo: con dieci posti la
   si raggiunge senza scorrere */
.barra-convalida {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background-color: rgba(24, 24, 24, 0.96);
	border: 1px solid #333;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.riepilogo-convalida {
	color: #ccc;
	font-size: 0.95rem;
}

.barra-convalida button {
	width: auto;
	margin: 0;
	padding: 14px 26px;
	font-size: 1.1rem;
	border-radius: 10px;
	flex-shrink: 0;
	background-color: #2ecc71;
	color: #0b2414;
}

.barra-convalida button:hover:not(:disabled) {
	background-color: #27b863;
}

.barra-convalida button:disabled {
	background-color: #2a2a2a;
	color: #666;
	cursor: not-allowed;
}

/* --- La pianta --- */
.mappa-ingresso {
	margin-top: 26px;
}

.mappa-ingresso .titolo-sezione {
	margin-top: 0;
}

.mappa-posto.evidenziato {
	position: relative;
	outline: 3px solid var(--accent-color);
	outline-offset: 2px;
	z-index: 1;
}

.mappa-posto.evidenziato.occupato {
	animation: posto-cercato 1.8s ease-in-out infinite;
}

@keyframes posto-cercato {
	0%, 100% { outline-color: var(--accent-color); }
	50%      { outline-color: rgba(212, 175, 55, 0.25); }
}

.mappa-posto.evidenziato.toccabile {
	cursor: pointer;
}

.mappa-posto.in-ingresso {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: #111;
	animation: none;
}

.mappa-legenda .mappa-posto.evidenziato {
	outline-width: 2px;
	outline-offset: 1px;
	animation: none;
}

/* --- In attesa: le serate di oggi --- */
.serate-oggi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.serata-oggi {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 10px;
	background-color: var(--card-bg);
	border: 1px solid #2a2a2a;
	color: #ccc;
	text-decoration: none;
}

.serata-oggi:hover {
	border-color: var(--accent-color);
}

.serata-oggi strong {
	color: var(--accent-color);
	font-size: 1.05rem;
}

.avanzamento {
	display: block;
	height: 6px;
	margin: 6px 0 2px;
	border-radius: 3px;
	background-color: #2a2a2a;
	overflow: hidden;
}

.avanzamento span {
	display: block;
	width: var(--percentuale);
	height: 100%;
	background-color: #2ecc71;
}

.serata-oggi small {
	color: #888;
}

@media (max-width: 860px) {
	.scheda-ingresso {
		grid-template-columns: 84px 1fr;
	}
	.conti-ingresso {
		grid-column: 1 / -1;
	}
	.conti-ingresso > div {
		flex: 1;
	}
}

@media (max-width: 560px) {
	.scheda-ingresso {
		grid-template-columns: 64px 1fr;
		gap: 14px;
		padding: 14px;
	}
	.nome-ingresso {
		font-size: 1.45rem;
	}
	.spettacolo-ingresso {
		font-size: 1.1rem;
	}
	.riga-scansione button {
		padding: 0 14px;
	}
	.riga-scansione button .fa + * {
		display: none;
	}
	.posti-ingresso {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 9px;
	}
	.tessera-posto {
		min-height: 118px;
	}
	.numero-tessera {
		font-size: 2.5rem;
	}
	.barra-convalida {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.voce-scelta {
		flex-wrap: wrap;
	}
	.conti-scelta {
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		width: 100%;
		padding-left: 68px;
	}
	/* Con .voce-scelta davanti: Font Awesome, caricato dopo, rimetterebbe display */
	.voce-scelta .freccia-scelta {
		display: none;
	}
	.chi-scelta small {
		display: block;
		margin-left: 0;
	}
}

/* =========================================
   MANUTENZIONE DEL DATABASE
   ========================================= */
.spiega-manutenzione {
	color: #9a9a9a;
	margin-bottom: 16px;
	max-width: 70ch;
}

.spiega-manutenzione code,
.tabelle-conferma code,
.voce-tabella code {
	background-color: #101010;
	border: 1px solid #2c2c2c;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 0.86em;
	color: #d8d8d8;
}

.sotto-titolo-manutenzione {
	margin: 26px 0 10px;
	font-size: 1rem;
	color: #ddd;
}

.azioni-backup {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.azioni-backup form {
	margin: 0;
}

.azioni-backup button {
	width: auto;
	margin: 0;
}

.btn-secondario {
	background-color: #333;
	color: #eee;
}

.btn-secondario:hover {
	background-color: #414141;
}

/* --- Le scelte rapide --- */
.scelte-rapide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}

.scelta-rapida {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid #2e2e2e;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scelta-rapida:hover {
	border-color: #555;
}

.scelta-rapida input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.testa-scelta-rapida {
	font-weight: bold;
	color: var(--accent-color);
}

.testo-scelta-rapida {
	font-size: 0.84rem;
	color: #999;
	line-height: 1.45;
}

.scelta-rapida:has(input:checked) {
	border-color: var(--accent-color);
	background-color: #241f12;
}

.scelta-rapida.pericolosa .testa-scelta-rapida {
	color: #ff7a7a;
}

.scelta-rapida.pericolosa:has(input:checked) {
	border-color: var(--danger-color);
	background-color: #2a1414;
}

/* --- Il super amministratore --- */
.blocco-admin {
	border: 1px solid rgba(255, 76, 76, 0.4);
	background-color: rgba(255, 76, 76, 0.07);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.blocco-admin[hidden] {
	display: none;
}

.blocco-admin h4 {
	color: #ff9b9b;
	margin-bottom: 8px;
}

.campi-admin {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.campi-admin label {
	display: block;
	font-size: 0.82rem;
	color: #bbb;
}

.campi-admin input {
	margin-top: 5px;
	margin-bottom: 0;
}

/* --- L'elenco delle tabelle --- */
.gruppo-tabelle {
	margin-bottom: 18px;
}

.nome-gruppo-tabelle {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #888;
	margin-bottom: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid #262626;
}

.collega-gruppo {
	width: auto;
	margin: 0;
	padding: 2px 9px;
	font-size: 0.68rem;
	text-transform: none;
	letter-spacing: 0;
	border-radius: 20px;
	background-color: #2a2a2a;
	color: #aaa;
	font-weight: normal;
}

.collega-gruppo:hover {
	background-color: #3a3a3a;
	color: #eee;
}

.elenco-tabelle {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 7px;
}

.voce-tabella {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 11px;
	border-radius: 8px;
	border: 1px solid #2a2a2a;
	background-color: #1a1a1a;
	cursor: pointer;
}

.voce-tabella input {
	width: auto;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--danger-color);
}

.voce-tabella code {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.righe-tabella {
	font-size: 0.76rem;
	color: #777;
	flex-shrink: 0;
}

.voce-tabella:has(input:checked) {
	border-color: var(--danger-color);
	background-color: rgba(255, 76, 76, 0.09);
}

.voce-tabella:has(input:checked) code {
	color: #ffc9c9;
	border-color: rgba(255, 76, 76, 0.35);
}

.gruppo-tabelle.protetto .nome-gruppo-tabelle {
	color: #5f5f5f;
}

.voce-tabella.spenta {
	cursor: not-allowed;
	opacity: 0.45;
}

/* --- La barra che porta al PIN --- */
.barra-pulizia {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding: 12px 14px;
	border-radius: 10px;
	background-color: rgba(20, 20, 20, 0.96);
	border: 1px solid #333;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

#riepilogo-pulizia {
	color: #ccc;
}

.barra-pulizia button {
	width: auto;
	margin: 0;
	padding: 12px 22px;
	flex-shrink: 0;
}

.barra-pulizia button:disabled {
	background-color: #2a2a2a;
	color: #666;
	cursor: not-allowed;
}

/* --- Il PIN --- */
.riquadro-pin {
	text-align: center;
	padding: 22px 18px 18px;
	margin-bottom: 20px;
	border-radius: 12px;
	border: 1px solid var(--accent-color);
	background:
		radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14), transparent 65%),
		var(--card-bg);
}

.etichetta-pin {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--accent-color);
	margin-bottom: 12px;
}

.cifre-pin {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}

.cifre-pin span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 68px;
	border-radius: 10px;
	background-color: #101010;
	border: 1px solid #333;
	font-size: 2.4rem;
	font-weight: bold;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.nota-pin {
	color: #999;
	font-size: 0.88rem;
}

.riassunto-pulizia {
	font-size: 1.05rem;
	color: #ddd;
	margin-bottom: 14px;
}

.riassunto-pulizia b {
	color: #ff9b9b;
}

.riga-backup-prima {
	margin-bottom: 16px;
}

.riga-backup-prima button {
	width: auto;
	margin: 0;
}

.tabelle-conferma {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
}

.segno-tabella {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	border-radius: 20px;
	background-color: rgba(255, 76, 76, 0.1);
	border: 1px solid rgba(255, 76, 76, 0.35);
	font-size: 0.84rem;
}

.segno-tabella b {
	color: #ff9b9b;
	font-variant-numeric: tabular-nums;
}

.segno-tabella.trascinata {
	background-color: rgba(52, 152, 219, 0.1);
	border-color: rgba(52, 152, 219, 0.45);
}

.segno-tabella.trascinata b {
	color: #8cc6ee;
}

.nota-trascinate {
	color: #aaa;
	font-size: 0.88rem;
	margin-bottom: 14px;
	max-width: 75ch;
}

.modulo-pin {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #2a2a2a;
}

.modulo-pin label {
	display: block;
	margin-bottom: 8px;
	color: #bbb;
}

.riga-pin {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.riga-pin input {
	width: 140px;
	margin: 0;
	padding: 12px;
	font-size: 1.6rem;
	text-align: center;
	letter-spacing: 8px;
	font-variant-numeric: tabular-nums;
}

.riga-pin button {
	width: auto;
	margin: 0;
	padding: 13px 22px;
}

.btn-annulla {
	background-color: #333;
	color: #ddd;
}

/* --- Il rapporto finale --- */
.credenziali-nuove {
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 10px;
	border: 1px solid var(--accent-color);
	background-color: rgba(212, 175, 55, 0.08);
}

.credenziali-nuove h4 {
	color: var(--accent-color);
	margin-bottom: 8px;
}

.credenziali-nuove p {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: #bbb;
	margin-bottom: 6px;
}

.credenziali-nuove p span {
	min-width: 90px;
	color: #888;
}

.credenziali-nuove p strong {
	color: #fff;
	font-family: monospace;
	font-size: 1.05rem;
}

.avviso-credenziali {
	display: block;
	margin-top: 10px;
	color: #f5d9a8;
	font-size: 0.88rem;
}

@media (max-width: 560px) {
	.cifre-pin span {
		width: 46px;
		height: 58px;
		font-size: 2rem;
	}
	.riga-pin input {
		width: 100%;
	}
	.riga-pin button {
		flex: 1;
	}
	.barra-pulizia {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* =========================================
   DETTAGLIO DELL'ABBONAMENTO
   -----------------------------------------
   La copertina di una rassegna è l'invito: va vista tutta e larga quanto
   la pagina, non ritagliata in una colonna. Le due colonne del dettaglio
   di uno spettacolo qui diventano una sola, in verticale.
   ========================================= */
.dettaglio-abbonamento {
	display: block;
}

.dettaglio-abbonamento .copertina-intera {
	width: 100%;
	/* Niente proporzione imposta e niente ritaglio: l'altezza la detta
	   l'immagine, fino a dove lo schermo la lascia respirare */
	aspect-ratio: auto;
	max-height: min(76vh, 900px);
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 26px;
}

.dettaglio-abbonamento .copertina-intera img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(76vh, 900px);
	object-fit: contain;
	border-radius: 10px;
}

.dettaglio-abbonamento .copertina-intera .locandina-mancante {
	min-height: 240px;
}

/* Con lo sfondo acceso la scheda ha una sua imbottitura: la copertina la
   scavalca e arriva ai bordi, incastrandosi negli angoli arrotondati */
.dettaglio-abbonamento.con-sfondo .copertina-intera {
	width: auto;
	margin: -34px -30px 26px -30px;
}

.dettaglio-abbonamento.con-sfondo .copertina-intera img {
	border-radius: 16px 16px 0 0;
}

/* Sotto i 768px il dettaglio stringe l'imbottitura e rimpicciolisce le
   locandine a 240px: la copertina della rassegna non deve seguirlo */
@media (max-width: 768px) {
	.dettaglio-abbonamento .copertina-intera {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	.dettaglio-abbonamento.con-sfondo .copertina-intera {
		margin: -24px -18px 22px -18px;
	}
}

/* Sul telefono la copertina esce anche dai margini della pagina e tocca i
   due bordi dello schermo: è la prima cosa che si vede, e metà del lavoro
   di convincere lo fa lei. `width: 100vw` con il margine negativo calcolato
   la centra senza creare scorrimento laterale. */
@media (max-width: 620px) {
	.dettaglio-abbonamento .copertina-intera,
	.dettaglio-abbonamento.con-sfondo .copertina-intera {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.dettaglio-abbonamento.con-sfondo .copertina-intera {
		margin-top: -24px;
	}
	.dettaglio-abbonamento .copertina-intera img,
	.dettaglio-abbonamento.con-sfondo .copertina-intera img {
		width: 100%;
		border-radius: 0;
	}
}

.dettaglio-abbonamento .testo-spettacolo {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.dettaglio-abbonamento .descrizione {
	text-align: left;
}

.dettaglio-abbonamento .riquadro-conto-rovescia {
	text-align: left;
}

/* --- Il pulsante d'acquisto --- */
.riga-acquisto {
	margin-top: 22px;
}

.btn-acquisto {
	display: inline-block;
	padding: 16px 34px;
	border-radius: 10px;
	font-size: 1.08rem;
	box-shadow: 0 10px 26px rgba(212, 175, 55, 0.22);
}

/* --- La barra che resta a portata di pollice --- */
.barra-acquisto {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 60;
	width: min(640px, calc(100vw - 24px));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px 12px 20px;
	border-radius: 14px;
	background-color: rgba(22, 22, 22, 0.97);
	border: 1px solid #3a3a3a;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.barra-acquisto.nascosta {
	opacity: 0;
	transform: translateX(-50%) translateY(140%);
	pointer-events: none;
}

.dati-barra-acquisto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dati-barra-acquisto strong {
	color: #f0f0f0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dati-barra-acquisto span {
	color: #999;
	font-size: 0.84rem;
}

.barra-acquisto .btn {
	width: auto;
	margin: 0;
	padding: 13px 24px;
	border-radius: 9px;
	flex-shrink: 0;
}

@media (max-width: 620px) {
	.dettaglio-abbonamento .copertina-intera,
	.dettaglio-abbonamento .copertina-intera img {
		/* Sul telefono la copertina può prendersi più spazio: è lei che
		   racconta la rassegna, e sotto c'è tutto il resto */
		max-height: 82vh;
	}
	.btn-acquisto {
		display: block;
		width: 100%;
		padding: 16px 20px;
	}
	.barra-acquisto {
		padding: 10px 12px 10px 16px;
		gap: 10px;
	}
	.barra-acquisto .btn {
		padding: 12px 16px;
	}
	.dati-barra-acquisto span {
		font-size: 0.78rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.barra-acquisto {
		transition: none;
	}
}

/* =========================================
   DIAGNOSI DELLE NOTIFICHE TELEGRAM
   ========================================= */
.azioni-telegram {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.azioni-telegram button {
	width: auto;
	margin: 0;
}

.aiuto-telegram {
	margin-top: 14px;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid rgba(230, 160, 40, 0.45);
	background-color: rgba(230, 160, 40, 0.08);
	color: #f0dcb4;
	font-size: 0.9rem;
	line-height: 1.55;
}

.aiuto-telegram.chiaro {
	border-color: rgba(52, 152, 219, 0.45);
	background-color: rgba(52, 152, 219, 0.08);
	color: #cfe6f7;
}

.aiuto-telegram p {
	margin-bottom: 8px;
}

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

.aiuto-telegram ul {
	margin: 0 0 10px 20px;
}

.aiuto-telegram li {
	margin-bottom: 5px;
}

.aiuto-telegram code {
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 4px;
	padding: 1px 6px;
}

.elenco-chat-telegram {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.chat-telegram {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border-radius: 8px;
	background-color: #161616;
	border: 1px solid #2c2c2c;
}

.chat-telegram > div {
	flex: 1;
	min-width: 140px;
	display: flex;
	flex-direction: column;
}

.chat-telegram strong {
	color: #eee;
}

.chat-telegram span {
	color: #888;
	font-size: 0.8rem;
}

.chat-telegram code {
	font-size: 0.95rem;
	color: var(--accent-color);
	background-color: #101010;
	border: 1px solid #2c2c2c;
	border-radius: 5px;
	padding: 3px 10px;
}

.chat-telegram .usa-chat {
	width: auto;
	margin: 0;
	flex-shrink: 0;
}

/* =========================================
   BANNER DEL CONSENSO AI COOKIE
   ========================================= */
.banner-consenso {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 120;
	width: min(820px, calc(100vw - 24px));
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 16px 20px;
	border-radius: 14px;
	background-color: rgba(20, 20, 20, 0.98);
	border: 1px solid #3a3a3a;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65);
	animation: consenso-entra 0.35s ease;
}

@keyframes consenso-entra {
	from { opacity: 0; transform: translateX(-50%) translateY(30px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.banner-consenso.via {
	opacity: 0;
	transform: translateX(-50%) translateY(30px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.testo-consenso {
	flex: 1 1 340px;
	min-width: 0;
}

.testo-consenso strong {
	display: block;
	color: var(--accent-color);
	margin-bottom: 5px;
}

.testo-consenso p {
	color: #bbb;
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0;
}

.testo-consenso a {
	color: var(--accent-color);
	white-space: nowrap;
}

.scelte-consenso {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.scelte-consenso .btn {
	width: auto;
	margin: 0;
	padding: 12px 24px;
	border-radius: 9px;
	cursor: pointer;
}

/* Rifiutare dev'essere facile quanto accettare: stessa dimensione, stesso
   peso, nessun trucco visivo per spingere verso il sì */
.rifiuta-consenso {
	background-color: #333;
	color: #eee;
}

.rifiuta-consenso:hover {
	background-color: #414141;
}

@media (max-width: 620px) {
	.banner-consenso {
		bottom: 10px;
		padding: 14px 16px;
		gap: 14px;
	}
	.scelte-consenso {
		width: 100%;
	}
	.scelte-consenso .btn {
		flex: 1;
		padding: 13px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.banner-consenso,
	.banner-consenso.via {
		animation: none;
		transition: none;
	}
}

/* Stato della configurazione Meta, nella pagina delle impostazioni */
.stato-meta {
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
	color: #ccc;
	font-size: 0.92rem;
}

.stato-meta li {
	padding: 5px 0;
	border-bottom: 1px solid #242424;
}

.stato-meta li:last-child {
	border-bottom: none;
}

/* --- Consenso che blocca la pagina ------------------------------------
   La modalità «Blocca» sfoca il contenuto e lo rende inservibile finché
   non si risponde. Il banner resta nitido e cliccabile perché è figlio
   diretto del <body>, fuori dai tre blocchi sfocati. */
body.consenso-bloccante > header,
body.consenso-bloccante > main,
body.consenso-bloccante > footer {
	filter: blur(var(--sfocatura-consenso, 6px));
	pointer-events: none;
	user-select: none;
}

.velo-consenso {
	position: fixed;
	inset: 0;
	z-index: 110;
	background-color: rgba(0, 0, 0, 0.45);
}

/* Al centro dello schermo, non in fondo: in questa modalità il banner non
   è un avviso di passaggio ma una domanda a cui si deve rispondere */
.banner-consenso.al-centro {
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.banner-consenso.al-centro.via {
	transform: translate(-50%, -50%) translateY(20px);
}

/* In colonna il `flex: 1 1 340px` del testo diventa un'altezza di 340px e
   lascia un buco in mezzo al riquadro: qui il testo si prende lo spazio che
   gli serve e basta */
.banner-consenso.al-centro .testo-consenso {
	flex: 0 0 auto;
	width: 100%;
}

.banner-consenso.al-centro .scelte-consenso {
	width: 100%;
}

.banner-consenso.al-centro .scelte-consenso .btn {
	flex: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.consenso-bloccante > header,
	body.consenso-bloccante > main,
	body.consenso-bloccante > footer {
		filter: none;
		opacity: 0.35;
	}
}

.avviso-non-conforme {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 76, 76, 0.5);
	background-color: rgba(255, 76, 76, 0.09);
	color: #ffc9c9;
	font-size: 0.88rem;
	line-height: 1.55;
}

.avviso-non-conforme .fa {
	color: var(--danger-color);
	margin-right: 5px;
}

/* Il link della campagna, da copiare e incollare nell'annuncio */
.link-campagna {
	display: block;
	padding: 12px 14px;
	border-radius: 8px;
	background-color: #101010;
	border: 1px solid #2c2c2c;
	color: var(--accent-color);
	font-size: 0.86rem;
	word-break: break-all;
	line-height: 1.5;
}