/**
 * Componenti UI del percorso pratica.
 *
 * REGOLA ARCHITETTURALE (sez. 21): questo foglio descrive SOLO struttura,
 * disposizione e comportamento. Nessun colore, font o misura è scritto qui:
 * ogni valore visivo passa da una custom property con fallback neutro.
 *
 * Il tema può ridefinire i token e cambiare radicalmente l'aspetto senza che
 * una sola riga di questo file venga toccata. Se un giorno il tema viene
 * sostituito, i fallback garantiscono che l'interfaccia resti usabile.
 */

/* --------------------------------------------------------------------- */
/* Fallback dei token: il tema li sovrascrive tutti.                      */
/* --------------------------------------------------------------------- */
.pc-percorso,
.pc-pratica,
.pc-messaggio,
.pc-verifica,
.pc-come-funziona,
.pc-requisiti,
.pc-importo,
.pc-faq,
.pc-gestore {
	--pc-inchiostro: var(--pc-color-ink, #16181d);
	--pc-inchiostro-tenue: var(--pc-color-ink-muted, #5d6470);
	--pc-carta: var(--pc-color-paper, #ffffff);
	--pc-carta-alt: var(--pc-color-paper-alt, #f4f5f7);
	--pc-linea: var(--pc-color-rule, #d9dce2);
	--pc-accento: var(--pc-color-accent, #1b3a6b);
	--pc-accento-testo: var(--pc-color-accent-ink, #ffffff);
	--pc-errore: var(--pc-color-danger, #9b2226);
	--pc-conferma: var(--pc-color-confirm, #1f6f4a);

	--pc-testo: var(--pc-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
	--pc-mono: var(--pc-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
	--pc-titolo-font: var(--pc-font-display, var(--pc-testo));

	--pc-s1: var(--pc-space-1, .25rem);
	--pc-s2: var(--pc-space-2, .5rem);
	--pc-s3: var(--pc-space-3, .75rem);
	--pc-s4: var(--pc-space-4, 1rem);
	--pc-s5: var(--pc-space-5, 1.5rem);
	--pc-s6: var(--pc-space-6, 2rem);
	--pc-s7: var(--pc-space-7, 3rem);

	--pc-raggio: var(--pc-radius, 4px);
	--pc-raggio-l: var(--pc-radius-lg, 8px);
	--pc-bordo: var(--pc-border-width, 1px);
	--pc-larghezza: var(--pc-measure, 34rem);
	--pc-transizione: var(--pc-motion, 160ms ease);

	color: var(--pc-inchiostro);
	font-family: var(--pc-testo);
}

/* Rispetta chi ha chiesto meno movimento. */
@media (prefers-reduced-motion: reduce) {
	.pc-percorso *,
	.pc-pratica * {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------- */
/* Percorso                                                               */
/* --------------------------------------------------------------------- */
.pc-percorso {
	max-width: var(--pc-larghezza);
	margin-inline: auto;
	padding-inline: var(--pc-s4);
}

.pc-percorso__avanzamento {
	height: 2px;
	background: var(--pc-linea);
	margin-block-end: var(--pc-s6);
	overflow: hidden;
}

.pc-avanzamento__barra {
	/* Valore di runtime, impostato dal JS a ogni passo. Il prefisso
	   --pc-runtime- lo distingue dai design token del tema: non è qualcosa
	   che la grafica debba dichiarare. */
	--pc-runtime-avanzamento: 0;
	display: block;
	height: 100%;
	background: var(--pc-accento);
	transform-origin: left center;
	transform: scaleX(var(--pc-runtime-avanzamento, 0));
	transition: transform var(--pc-transizione);
}

.pc-passo[hidden] { display: none; }

.pc-passo__indice {
	font-family: var(--pc-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	color: var(--pc-inchiostro-tenue);
	margin: 0 0 var(--pc-s2);
}

.pc-passo__titolo {
	font-family: var(--pc-titolo-font);
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
	line-height: 1.2;
	margin: 0 0 var(--pc-s5);
}

.pc-passo__titolo:focus-visible { outline: 2px solid var(--pc-accento); outline-offset: 4px; }

.pc-passo__sottotitolo {
	color: var(--pc-inchiostro-tenue);
	margin: calc(var(--pc-s5) * -1 + var(--pc-s2)) 0 var(--pc-s5);
}

/* --------------------------------------------------------------------- */
/* Campi                                                                  */
/* --------------------------------------------------------------------- */
.pc-campo { margin-block-end: var(--pc-s5); }

.pc-campo--doppio {
	display: grid;
	gap: var(--pc-s4);
	grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
	.pc-campo--doppio { grid-template-columns: 2fr 1fr; }
	.pc-campo--doppio:has(> div:nth-child(2) input[type="email"]),
	.pc-campo--doppio:has(> div:nth-child(1) input[autocomplete="given-name"]) {
		grid-template-columns: 1fr 1fr;
	}
}

.pc-campo__label {
	display: block;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pc-inchiostro-tenue);
	margin-block-end: var(--pc-s2);
}

.pc-campo__input {
	inline-size: 100%;
	box-sizing: border-box;
	/* 16px minimi: sotto questa soglia iOS ingrandisce la pagina al focus. */
	font-size: 1rem;
	font-family: inherit;
	color: var(--pc-inchiostro);
	background: var(--pc-carta);
	border: var(--pc-bordo) solid var(--pc-linea);
	border-radius: var(--pc-raggio);
	padding: var(--pc-s3);
	min-block-size: 2.75rem;
	transition: border-color var(--pc-transizione);
}

.pc-campo__input:focus-visible {
	outline: 2px solid var(--pc-accento);
	outline-offset: 1px;
	border-color: var(--pc-accento);
}

.pc-campo__input--codice {
	font-family: var(--pc-mono);
	letter-spacing: .08em;
}

.pc-campo__input.is-errato { border-color: var(--pc-errore); }

.pc-campo__aiuto,
.pc-campo__errore,
.pc-campo__conferma {
	font-size: .8125rem;
	margin: var(--pc-s2) 0 0;
}

.pc-campo__aiuto { color: var(--pc-inchiostro-tenue); }
.pc-campo__errore { color: var(--pc-errore); }
.pc-campo__errore:empty { display: none; }
.pc-campo__conferma { color: var(--pc-conferma); }

/* --------------------------------------------------------------------- */
/* Ente competente: conferma sobria, non una certificazione               */
/* --------------------------------------------------------------------- */
.pc-ente {
	border-inline-start: 2px solid var(--pc-accento);
	padding: var(--pc-s3) var(--pc-s4);
	margin-block-end: var(--pc-s5);
	background: var(--pc-carta-alt);
}

.pc-ente__etichetta {
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pc-inchiostro-tenue);
	margin: 0 0 var(--pc-s1);
}

.pc-ente__nome { margin: 0; font-weight: 600; }

/* --------------------------------------------------------------------- */
/* Avviso territorio non attivo                                           */
/* --------------------------------------------------------------------- */
.pc-avviso {
	border: var(--pc-bordo) solid var(--pc-linea);
	border-radius: var(--pc-raggio-l);
	padding: var(--pc-s4);
	margin-block-end: var(--pc-s5);
	background: var(--pc-carta-alt);
}

.pc-avviso__titolo { font-size: 1rem; margin: 0 0 var(--pc-s2); }
.pc-avviso__testo { margin: 0 0 var(--pc-s4); color: var(--pc-inchiostro-tenue); }

/* --------------------------------------------------------------------- */
/* Scelte e consensi                                                      */
/* --------------------------------------------------------------------- */
.pc-scelta,
.pc-consensi {
	border: 0;
	padding: 0;
	margin: 0 0 var(--pc-s5);
}

.pc-scelta__titolo,
.pc-consensi__titolo {
	padding: 0;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pc-inchiostro-tenue);
	margin-block-end: var(--pc-s3);
}

.pc-scelta__opzione,
.pc-consenso {
	display: flex;
	gap: var(--pc-s3);
	align-items: flex-start;
	padding: var(--pc-s3) 0;
	cursor: pointer;
	line-height: 1.5;
}

.pc-scelta__opzione input,
.pc-consenso input {
	/* Bersaglio ampio: il percorso è mobile-first. */
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: .1rem;
	flex: none;
	accent-color: var(--pc-accento);
}

.pc-consenso span { font-size: .9375rem; }

.pc-spedizione[hidden] { display: none; }

/* --------------------------------------------------------------------- */
/* Riepilogo: impaginazione da documento                                  */
/* --------------------------------------------------------------------- */
.pc-riepilogo { margin: 0 0 var(--pc-s6); }

.pc-riepilogo__riga {
	display: grid;
	gap: var(--pc-s1);
	padding: var(--pc-s3) 0;
	border-block-end: var(--pc-bordo) solid var(--pc-linea);
}

.pc-riepilogo__riga:last-child { border-block-end: 0; }

.pc-riepilogo__etichetta {
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pc-inchiostro-tenue);
}

.pc-riepilogo__valore { margin: 0; font-size: 1rem; }
.pc-riepilogo__valore--codice { font-family: var(--pc-mono); letter-spacing: .06em; }

.pc-riepilogo__condizione {
	display: block;
	font-size: .8125rem;
	font-style: italic;
	color: var(--pc-inchiostro-tenue);
	margin-block-start: var(--pc-s1);
}

/* --------------------------------------------------------------------- */
/* Requisiti: leggibili, mai in corpo ridotto (vincolo sez. 7.2)          */
/* --------------------------------------------------------------------- */
.pc-requisiti {
	border: var(--pc-bordo) solid var(--pc-linea);
	border-radius: var(--pc-raggio-l);
	padding: var(--pc-s4);
	margin-block-end: var(--pc-s6);
}

.pc-requisiti__titolo { font-size: 1rem; margin: 0 0 var(--pc-s3); }

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

.pc-requisiti__voce {
	/* Stessa dimensione dei valori del riepilogo: nessuna svalutazione
	   grafica dei requisiti. */
	font-size: 1rem;
	padding: var(--pc-s2) 0 var(--pc-s2) var(--pc-s5);
	position: relative;
}

.pc-requisiti__voce::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--pc-s2);
	inset-block-start: calc(var(--pc-s2) + .55em);
	inline-size: .375rem;
	block-size: .375rem;
	border-radius: 50%;
	background: var(--pc-accento);
}

.pc-requisiti__nota {
	font-size: .875rem;
	color: var(--pc-inchiostro-tenue);
	margin: var(--pc-s3) 0 0;
}

/* --------------------------------------------------------------------- */
/* Importo                                                                */
/* --------------------------------------------------------------------- */
.pc-importo { margin-block-end: var(--pc-s6); }
.pc-importo__titolo { font-size: 1rem; margin: 0 0 var(--pc-s2); }

.pc-importo__valore {
	font-family: var(--pc-titolo-font);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
	line-height: 1;
	margin: 0 0 var(--pc-s2);
}

.pc-importo__nota { font-size: .875rem; color: var(--pc-inchiostro-tenue); margin: 0 0 var(--pc-s1); }
.pc-importo__rimborso { font-size: .875rem; font-style: italic; margin: var(--pc-s3) 0 0; }

/* --------------------------------------------------------------------- */
/* Bottoni                                                                */
/* --------------------------------------------------------------------- */
.pc-azioni {
	display: flex;
	gap: var(--pc-s3);
	align-items: center;
	flex-wrap: wrap;
	margin-block-start: var(--pc-s6);
}

.pc-azioni--principale { justify-content: space-between; }

.pc-bottone {
	font: inherit;
	font-size: 1rem;
	border: var(--pc-bordo) solid transparent;
	border-radius: var(--pc-raggio);
	padding: var(--pc-s3) var(--pc-s5);
	min-block-size: 2.75rem;
	cursor: pointer;
	transition: background-color var(--pc-transizione), border-color var(--pc-transizione), opacity var(--pc-transizione);
}

.pc-bottone:focus-visible { outline: 2px solid var(--pc-accento); outline-offset: 2px; }
.pc-bottone[disabled] { opacity: .55; cursor: progress; }

.pc-bottone--primario {
	background: var(--pc-accento);
	color: var(--pc-accento-testo);
}

.pc-bottone--secondario {
	background: transparent;
	color: var(--pc-inchiostro);
	border-color: var(--pc-linea);
}

.pc-bottone--testo {
	background: transparent;
	color: var(--pc-inchiostro-tenue);
	padding-inline: var(--pc-s2);
}

.pc-bottone--largo { flex: 1 1 14rem; text-align: center; }

.pc-link { color: var(--pc-accento); text-underline-offset: .2em; }

/* --------------------------------------------------------------------- */
/* Pagamento                                                              */
/* --------------------------------------------------------------------- */
.pc-pagamento { margin-block-start: var(--pc-s5); }
.pc-pagamento[hidden] { display: none; }
.pc-pagamento__elemento { min-block-size: 3rem; }

/* --------------------------------------------------------------------- */
/* Esito e pagina pratica                                                 */
/* --------------------------------------------------------------------- */
.pc-esito[hidden] { display: none; }
.pc-esito__titolo { font-family: var(--pc-titolo-font); font-size: 1.5rem; margin: 0 0 var(--pc-s5); }
.pc-esito__testo { margin: 0 0 var(--pc-s5); }

.pc-pratica {
	max-width: var(--pc-larghezza);
	margin-inline: auto;
	padding-inline: var(--pc-s4);
}

.pc-pratica__intestazione {
	border-block-end: 2px solid var(--pc-inchiostro);
	padding-block-end: var(--pc-s4);
	margin-block-end: var(--pc-s6);
}

/* Il numero pratica è un elemento identitario (sez. 23.4). */
.pc-pratica__numero {
	font-family: var(--pc-mono);
	font-size: .875rem;
	letter-spacing: .14em;
	color: var(--pc-inchiostro-tenue);
	margin: 0 0 var(--pc-s2);
}

.pc-pratica__titolo {
	font-family: var(--pc-titolo-font);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
	line-height: 1.15;
	margin: 0;
}

.pc-sezione__titolo {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pc-inchiostro-tenue);
	margin: 0 0 var(--pc-s2);
}

.pc-stato { margin-block-end: var(--pc-s6); }
.pc-stato__valore { font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--pc-s5); }
.pc-stato__prossimo { margin: 0; }

.pc-completamento,
.pc-dettagli,
.pc-cronologia,
.pc-assistenza,
.pc-completa {
	margin-block-end: var(--pc-s6);
	padding-block-start: var(--pc-s5);
	border-block-start: var(--pc-bordo) solid var(--pc-linea);
}

.pc-completamento__intro { color: var(--pc-inchiostro-tenue); margin: 0 0 var(--pc-s5); }
.pc-completa__messaggio { font-size: 1.0625rem; margin: 0; }

/* --------------------------------------------------------------------- */
/* Delega e firma                                                         */
/* --------------------------------------------------------------------- */
.pc-delega { margin-block-end: var(--pc-s6); }
.pc-delega__titolo { font-size: 1rem; margin: 0 0 var(--pc-s3); }
.pc-delega__testo { margin: 0 0 var(--pc-s4); }

.pc-firma__area {
	inline-size: 100%;
	block-size: 11rem;
	border: var(--pc-bordo) dashed var(--pc-linea);
	border-radius: var(--pc-raggio);
	background: var(--pc-carta);
	/* Il gesto di firma non deve far scorrere la pagina. */
	touch-action: none;
	cursor: crosshair;
	display: block;
}

.pc-firma__azioni {
	display: flex;
	gap: var(--pc-s3);
	justify-content: space-between;
	margin-block-start: var(--pc-s3);
}

/* --------------------------------------------------------------------- */
/* Caricamento documenti                                                  */
/* --------------------------------------------------------------------- */
.pc-upload {
	border: var(--pc-bordo) solid var(--pc-linea);
	border-radius: var(--pc-raggio-l);
	padding: var(--pc-s4);
	margin-block-end: var(--pc-s4);
	transition: border-color var(--pc-transizione);
}

.pc-upload.is-completo { border-color: var(--pc-conferma); }
.pc-upload__titolo { font-size: 1rem; margin: 0 0 var(--pc-s3); }

.pc-upload__campo { display: block; cursor: pointer; }
.pc-upload__campo input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

.pc-upload__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: var(--pc-s3) var(--pc-s5);
	border: var(--pc-bordo) solid var(--pc-linea);
	border-radius: var(--pc-raggio);
}

.pc-upload__campo input:focus-visible + .pc-upload__cta {
	outline: 2px solid var(--pc-accento);
	outline-offset: 2px;
}

.pc-upload__stato { font-size: .875rem; color: var(--pc-inchiostro-tenue); margin: var(--pc-s3) 0 0; }
.pc-upload__stato:empty { display: none; }

/* --------------------------------------------------------------------- */
/* Cronologia                                                             */
/* --------------------------------------------------------------------- */
.pc-cronologia__elenco { list-style: none; margin: 0; padding: 0; }

.pc-cronologia__voce {
	display: grid;
	gap: var(--pc-s1);
	padding: var(--pc-s3) 0;
	border-block-end: var(--pc-bordo) solid var(--pc-linea);
}

.pc-cronologia__voce:last-child { border-block-end: 0; }

.pc-cronologia__data {
	font-family: var(--pc-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	color: var(--pc-inchiostro-tenue);
}

.pc-assistenza__riferimento {
	font-family: var(--pc-mono);
	font-size: .8125rem;
	letter-spacing: .1em;
	color: var(--pc-inchiostro-tenue);
	margin-block-start: var(--pc-s3);
}

/* --------------------------------------------------------------------- */
/* Blocchi informativi                                                    */
/* --------------------------------------------------------------------- */
.pc-passaggi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pc-s5);
}

@media (min-width: 48rem) {
	.pc-passaggi { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.pc-passaggio { margin: 0; }

.pc-passaggio__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border: var(--pc-bordo) solid var(--pc-inchiostro);
	border-radius: 50%;
	font-family: var(--pc-mono);
	font-size: .8125rem;
	margin-block-end: var(--pc-s3);
}

.pc-passaggio__titolo { font-size: 1rem; margin: 0 0 var(--pc-s2); }
.pc-passaggio__testo { margin: 0; color: var(--pc-inchiostro-tenue); font-size: .9375rem; }

.pc-faq__voce { border-block-end: var(--pc-bordo) solid var(--pc-linea); }

.pc-faq__domanda {
	padding: var(--pc-s4) 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.pc-faq__domanda::-webkit-details-marker { display: none; }
.pc-faq__domanda::after { content: " +"; font-family: var(--pc-mono); color: var(--pc-inchiostro-tenue); }
.pc-faq__voce[open] .pc-faq__domanda::after { content: " −"; }
.pc-faq__risposta { margin: 0 0 var(--pc-s4); color: var(--pc-inchiostro-tenue); }

.pc-gestore { font-size: .8125rem; color: var(--pc-inchiostro-tenue); }
.pc-gestore__natura { margin: 0 0 var(--pc-s2); }
.pc-gestore__dati { margin: 0 0 var(--pc-s1); }
.pc-gestore__contatto { margin: 0; }

/* --------------------------------------------------------------------- */
/* Messaggi                                                               */
/* --------------------------------------------------------------------- */
.pc-messaggio,
.pc-verifica {
	max-width: var(--pc-larghezza);
	margin-inline: auto;
	padding: var(--pc-s7) var(--pc-s4);
}

.pc-messaggio__titolo,
.pc-verifica__titolo {
	font-family: var(--pc-titolo-font);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
	margin: 0 0 var(--pc-s5);
}

.pc-messaggio__testo,
.pc-verifica__testo { margin: 0 0 var(--pc-s4); }

.pc-modifica { margin-block: var(--pc-s5); }
.pc-modifica summary { cursor: pointer; padding-block: var(--pc-s3); font-weight: 600; }
.pc-modifica form { margin-block-start: var(--pc-s4); }
.pc-riepilogo__valore, .pc-stato__prossimo, .pc-campo__errore { overflow-wrap: anywhere; }
.pc-bottone { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.pc-firma__area { background: #fff; color: #111; }

/* Data numerica rapida: nessun calendario, solo GG / MM / AAAA. */
.pc-data-rapida {
	display: grid;
	grid-template-columns: minmax(3.4rem, .8fr) auto minmax(3.4rem, .8fr) auto minmax(5.4rem, 1.25fr);
	align-items: center;
	gap: var(--pc-s2);
}
.pc-data-rapida__campo { text-align: center; font-variant-numeric: tabular-nums; }
.pc-data-rapida__separatore { color: var(--pc-inchiostro-tenue); text-align: center; }
@media (max-width: 24rem) {
	.pc-data-rapida { gap: var(--pc-s1); }
	.pc-data-rapida__campo { padding-inline: var(--pc-s2); }
}