/**
 * Stili dell'area documentale.
 *
 * Sobri di proposito: la pelle definitiva arriva dal tema e dal design system.
 * Qui c'è solo ciò che serve perché l'archivio sia leggibile e accessibile.
 */

.upee-documenti__titolo,
.upee-correlati__titolo {
	margin: 0 0 1rem;
}

/* --- Ricerca -------------------------------------------------------------- */

.upee-ricerca {
	margin-bottom: 1.5rem;
}

.upee-ricerca__riga {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 var(--upee-gap);
}

.upee-ricerca__campo {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--upee-border);
	border-radius: 6px;
	background: var(--upee-surface);
	font-size: 1rem;
}

/* --- Barra sopra l'elenco: conteggio e ordine ---------------------------- */

.upee-documenti__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 0.75rem;
}

.upee-documenti__conteggio {
	margin: 0;
	color: var(--upee-text-soft);
	font-size: 0.9375rem;
}

.upee-documenti__ordina {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
}

.upee-documenti__ordina label {
	color: var(--upee-text-soft);
}

.upee-documenti__ordina select {
	height: 36px;
	padding: 0 0.85rem;
	border: 1px solid var(--upee-border);
	border-radius: 999px;
	background: var(--upee-surface);
	font-size: 0.875rem;
}

/* --- Elenco a righe dense --------------------------------------------------- */
/*
 * Una riga per documento, colonne allineate: a regime l'archivio conta
 * centinaia di documenti e conta scorrere e riconoscere, non leggere una
 * scheda per volta. Intestazione e righe condividono la stessa griglia.
 *
 * Regolabili dal CSS del modulo: --upee-doc-accento (pulsante Scarica e
 * linguetta del formato).
 */

.upee-documenti {
	--upee-doc-accento: var(--gcid-secondary-color, #d2314c);
	--upee-doc-griglia: 3rem minmax(0, 2.6fr) minmax(0, 1.6fr) 6.5rem 8rem 6.5rem;
}

.upee-documenti__intestazione,
.upee-documenti .upee-documento {
	display: grid;
	grid-template-columns: var(--upee-doc-griglia);
	column-gap: 1rem;
	align-items: center;
}

.upee-documenti__intestazione {
	padding: 0 0.75rem 0.45rem;
	border-bottom: 2px solid var(--upee-text, #1d2327);
	color: var(--upee-text-soft);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.upee-documenti ul.upee-documenti__elenco {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.upee-documenti .upee-documento {
	margin: 0 !important;
	padding: 0.6rem 0.75rem !important;
	border-bottom: 1px solid var(--upee-border);
	background: var(--upee-surface);
	transition: background-color 0.15s;
}

.upee-documenti .upee-documento::before {
	content: none !important;
}

.upee-documenti .upee-documento:hover {
	background: color-mix(in srgb, var(--upee-doc-accento) 4%, var(--upee-surface, #fff));
}

/* Linguetta del formato: si riconosce a colpo d'occhio. */
.upee-documenti .upee-documento__formato {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--upee-doc-accento) 10%, #fff);
	color: var(--upee-doc-accento);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.03em;
}

.upee-documenti .upee-documento__corpo {
	min-width: 0;
}

/* Divi impone .et_pb_module h3 { font-size: 42px !important }. */
.upee-documenti h3.upee-documento__titolo {
	margin: 0;
	padding: 0;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.upee-documenti .upee-documento__titolo a {
	color: inherit;
	text-decoration: none;
}

.upee-documenti .upee-documento__titolo a:hover,
.upee-documenti .upee-documento__titolo a:focus-visible {
	color: var(--upee-doc-accento);
	text-decoration: underline;
}

.upee-documento__versione {
	margin-left: 0.35rem;
	padding: 0 0.4em;
	border-radius: 4px;
	background: var(--upee-tone-neutral-bg);
	color: var(--upee-tone-neutral-fg);
	font-size: 0.6875rem;
	font-weight: 600;
	vertical-align: 0.15em;
}

/* Una riga di descrizione: il resto è nella pagina del documento. */
.upee-documenti .upee-documento__estratto {
	display: block;
	margin: 0.1rem 0 0;
	padding: 0;
	overflow: hidden;
	color: var(--upee-text-soft);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.upee-documenti .upee-documento__tag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.upee-documenti .upee-documento .upee-tag {
	padding: 0.05em 0.55em;
	font-size: 0.6875rem;
	line-height: 1.6;
	white-space: nowrap;
}

.upee-tag {
	display: inline-block;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	background: var(--upee-tone-neutral-bg);
	color: var(--upee-tone-neutral-fg);
	font-size: 0.75rem;
}

.upee-documenti .upee-documento__data,
.upee-documenti .upee-documento__file {
	margin: 0;
	padding: 0;
	color: var(--upee-text-soft);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.upee-documenti .upee-documento__azioni {
	margin: 0;
	padding: 0;
	justify-self: end;
}

.upee-documenti .upee-documento__scarica {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 34px;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: var(--upee-doc-accento);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.upee-documenti .upee-documento__scarica:hover,
.upee-documenti .upee-documento__scarica:focus-visible {
	background: color-mix(in srgb, var(--upee-doc-accento) 85%, #000);
	color: #fff;
}

/* Schermo medio: la classificazione esce, il resto resta in colonna. */
@media (max-width: 64rem) {
	.upee-documenti {
		--upee-doc-griglia: 3rem minmax(0, 1fr) 6.5rem 8rem 6.5rem;
	}

	.upee-documenti__intestazione span:nth-child(3),
	.upee-documenti .upee-documento__tag {
		display: none;
	}
}

/*
 * Telefono: formato, titolo con data e file sotto, Scarica a destra (solo
 * icona). Niente intestazione di colonne.
 */
@media (max-width: 40rem) {
	.upee-documenti__intestazione {
		display: none;
	}

	.upee-documenti .upee-documento {
		grid-template-columns: 2.4rem minmax(0, 1fr) auto;
		grid-template-areas:
			"formato corpo azioni"
			"formato info  azioni";
		column-gap: 0.75rem;
		row-gap: 0.1rem;
		padding: 0.65rem 0.25rem !important;
	}

	.upee-documenti .upee-documento__formato {
		grid-area: formato;
		align-self: start;
		width: 2.3rem;
		height: 2.3rem;
	}

	.upee-documenti .upee-documento__corpo { grid-area: corpo; }
	.upee-documenti .upee-documento__azioni { grid-area: azioni; }

	.upee-documenti .upee-documento__estratto {
		display: none;
	}

	/* Data e file sulla stessa riga, sotto il titolo. */
	.upee-documenti .upee-documento__data,
	.upee-documenti .upee-documento__file {
		grid-area: info;
		font-size: 0.75rem;
	}

	.upee-documenti .upee-documento__file {
		justify-self: end;
		margin-right: 0;
	}

	.upee-documenti .upee-documento__data {
		justify-self: start;
	}

	.upee-documenti .upee-documento__scarica {
		width: 38px;
		height: 38px;
		padding: 0;
		justify-content: center;
	}

	.upee-documenti .upee-documento__scarica-testo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* --- Paginazione ---------------------------------------------------------- */

.upee-paginazione {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.upee-paginazione .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--upee-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--upee-text);
}

.upee-paginazione .page-numbers.current {
	background: var(--upee-accent);
	border-color: var(--upee-accent);
	color: #fff;
	font-weight: 600;
}

.upee-paginazione .page-numbers.dots {
	border-color: transparent;
}

/* --- Documenti correlati -------------------------------------------------- */

.upee-correlati__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.upee-correlati__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--upee-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--upee-text);
	background: var(--upee-surface);
}

.upee-correlati__link:hover,
.upee-correlati__link:focus-visible {
	border-color: var(--upee-accent);
}

.upee-correlati__formato {
	flex: 0 0 auto;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	background: var(--upee-tone-info-bg);
	color: var(--upee-tone-info-fg);
	font-size: 0.6875rem;
	font-weight: 700;
}

.upee-correlati__nome {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
}

/* Via verso l'elenco completo, quando l'elenco mostrato è volutamente corto. */
.upee-correlati__tutti {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.upee-correlati__peso {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	color: var(--upee-text-soft);
}