/**
 * @file plugins/themes/dgtiPortalRevistasUg/styles/portal.css
 *
 * Distributed under the GNU GPL v3. For full terms see the file LICENSE.
 *
 * @brief Portal de Revistas UG: the portal's front page as a library card
 *  catalogue. Loaded only on site-level pages (never inside a journal). The
 *  site header takes the UG navy on every site page; everything else only
 *  applies on the front page, inside .ugp or under a page that contains it.
 */

.pkp_structure_page {
	--ugp-navy: #183e6f;
	--ugp-navy-deep: #112954;
	--ugp-on-navy: #ffffff;
	--ugp-on-navy-soft: #c9d8ec;
	--ugp-orange: #f76a0c;
	--ugp-drawer: #e4ebf4;
	--ugp-drawer-line: #cbd6e5;
	--ugp-card: #ffffff;
	--ugp-card-line: #d3dcea;
	--ugp-ink: #13233b;
	--ugp-muted: #4a5b73;
	--ugp-faint: #5d6b80;
	--ugp-cover-bg: #eef2f8;
	--ugp-sans: "Avenir Next", "Avenir LT Std", "Avenir", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ugp-display: "Avenir Next", "Avenir LT Std", "Avenir", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ugp-typed: "Courier Prime", "Courier New", Courier, monospace;
	--ugp-shadow-card: 0 1px 2px rgba(17, 41, 84, 0.14), 0 2px 5px -3px rgba(17, 41, 84, 0.2);
	--ugp-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ugp-wrap: 1240px;
}

/* Site header in the UG navy, on every site-level page */
.pkp_structure_head {
	background: var(--ugp-navy);
	border-bottom: 0;
}

/* The site has no primary menu by default: no empty row under the logo */
.pkp_navigation_primary_row:not(:has(li)) {
	display: none;
}

.pkp_site_name .is_img img {
	width: auto;
	max-height: 44px;
}

@media (max-width: 991px) {
	.pkp_site_name .is_img img {
		max-height: 32px;
	}
}

/* Footer band in UG dark navy, on every site-level page. The site footer text
   (Administración > Aspecto > Pie de página) is laid out in columns: each
   top-level paragraph or list is a column, and a last paragraph after the
   columns runs full width under a rule, for the copyright line. */
.pkp_structure_footer_wrapper {
	background: var(--ugp-navy-deep);
	color: var(--ugp-on-navy-soft);
}

.pkp_structure_footer_wrapper a {
	color: var(--ugp-on-navy);
}

.pkp_structure_footer_wrapper a:hover,
.pkp_structure_footer_wrapper a:focus {
	color: var(--ugp-on-navy);
	text-decoration-thickness: 2px;
}

.pkp_structure_footer_wrapper strong {
	color: var(--ugp-on-navy);
}

.pkp_brand_footer img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.pkp_structure_footer .pkp_footer_content {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 3rem;
	line-height: 1.6;
}

.pkp_structure_footer .pkp_footer_content > * {
	flex: 1 1 14rem;
	margin: 0;
}

.pkp_structure_footer .pkp_footer_content > ul {
	padding: 0;
	list-style: none;
}

.pkp_structure_footer .pkp_footer_content > p:last-child:not(:first-child) {
	flex-basis: 100%;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.9em;
}

/* ---------- Front page only ---------- */

.pkp_structure_page:has(.ugp) {
	background: var(--ugp-drawer);
}

/* The catalogue takes the whole width; the Default theme's column is not used here */
.pkp_structure_page:has(.ugp) .pkp_structure_content {
	width: auto;
	max-width: none;
	padding: 0;
}

.pkp_structure_page:has(.ugp) .pkp_structure_main {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.pkp_structure_page:has(.ugp) .pkp_structure_main::before,
.pkp_structure_page:has(.ugp) .pkp_structure_main::after {
	display: none;
}

.pkp_structure_page .ugp {
	color: var(--ugp-ink);
	font-family: var(--ugp-sans);
	font-size: 1.1429rem;
	line-height: 1.5;
}

.pkp_structure_page .ugp ::selection {
	background: #ffd2b0;
	color: var(--ugp-ink);
}

.pkp_structure_page .ugp :focus-visible {
	outline: 3px solid var(--ugp-orange);
	outline-offset: 2px;
}

.pkp_structure_page .ugp .ugp-wrap {
	width: 100%;
	max-width: var(--ugp-wrap);
	margin: 0 auto;
	padding: 0 1.4286rem;
	box-sizing: border-box;
}

.pkp_structure_page .ugp *,
.pkp_structure_page .ugp *::before,
.pkp_structure_page .ugp *::after {
	box-sizing: border-box;
}

/* The navy band continues the site header: introduction, search, drawer tab */
.pkp_structure_page .ugp .ugp-band {
	background: var(--ugp-navy);
	color: var(--ugp-on-navy);
}

.pkp_structure_page .ugp .ugp-intro {
	padding-top: 1.4286rem;
	padding-bottom: 1.7143rem;
}

.pkp_structure_page .ugp .ugp-title {
	margin: 0;
	color: var(--ugp-on-navy);
	font-family: var(--ugp-display);
	font-size: clamp(2.2857rem, 1.6rem + 1.7vw, 3.2857rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.pkp_structure_page .ugp .ugp-lede {
	max-width: 48ch;
	margin: 0.8571rem 0 0;
	color: var(--ugp-on-navy-soft);
	font-size: 1.2143rem;
	line-height: 1.55;
}

.pkp_structure_page .ugp .ugp-slip {
	margin-top: 0;
}

.pkp_structure_page .ugp .ugp-slip__label {
	display: block;
	margin-bottom: 0.5714rem;
	color: var(--ugp-on-navy-soft);
	font-size: 1rem;
	font-weight: 600;
}

.pkp_structure_page .ugp .ugp-slip__field {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 52.5714rem;
	padding: 0.2857rem;
	background: var(--ugp-card);
	border-radius: 6px;
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.55);
	color: var(--ugp-navy);
}

.pkp_structure_page .ugp .ugp-slip__field > svg {
	position: absolute;
	left: 1.2571rem;
	pointer-events: none;
}

.pkp_structure_page .ugp .ugp-slip input {
	width: 100%;
	height: 3.7143rem;
	margin: 0;
	padding: 0 3.7143rem 0 3.6rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--ugp-ink);
	font: inherit;
	font-size: 1.2857rem;
}

.pkp_structure_page .ugp .ugp-slip input::placeholder {
	color: var(--ugp-faint);
}

.pkp_structure_page .ugp .ugp-slip input:focus {
	outline: none;
}

.pkp_structure_page .ugp .ugp-slip__field:focus-within {
	box-shadow: 0 0 0 3px var(--ugp-orange), 0 10px 30px -14px rgba(0, 0, 0, 0.55);
}

.pkp_structure_page .ugp .ugp-slip kbd {
	position: absolute;
	right: 1.1429rem;
	display: grid;
	place-items: center;
	min-width: 1.8286rem;
	height: 1.8286rem;
	padding: 0;
	border: 1px solid var(--ugp-card-line);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: none;
	box-shadow: none;
	color: var(--ugp-muted);
	font-family: var(--ugp-typed);
	font-size: 1rem;
	font-weight: 700;
}

.pkp_structure_page .ugp .ugp-slip__field:focus-within kbd {
	display: none;
}

/* One divider tab rising out of the drawer, with order and view beside it */
.pkp_structure_page .ugp .ugp-drawer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.8571rem 1.7143rem;
}

.pkp_structure_page .ugp .ugp-drawer-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4571rem;
	margin: 0 0 -1px;
	padding: 0.8rem 1.4286rem 0.6857rem;
	border-radius: 8px 8px 0 0;
	background: var(--ugp-drawer);
	color: var(--ugp-muted);
	font-size: 1.0714rem;
}

.pkp_structure_page .ugp .ugp-count__n {
	display: inline-block;
	color: var(--ugp-ink);
	font-family: var(--ugp-typed);
	font-size: 1.4286rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pkp_structure_page .ugp .ugp-count__n.is-ticking {
	animation: ugp-tick 420ms var(--ugp-ease);
}

@keyframes ugp-tick {
	from {
		transform: translateY(-0.45em);
		opacity: 0;
	}
}

.pkp_structure_page .ugp .ugp-toolbar {
	display: flex;
	align-items: center;
	gap: 1.1429rem;
	margin-bottom: 0.6857rem;
}

.pkp_structure_page .ugp .ugp-sort {
	display: flex;
	align-items: center;
	gap: 0.5714rem;
	margin: 0;
	color: var(--ugp-on-navy-soft);
	font-size: 1rem;
	font-weight: 600;
}

.pkp_structure_page .ugp .ugp-sort select {
	height: 2.8571rem;
	padding: 0 2.2857rem 0 0.8571rem;
	border: 1px solid var(--ugp-drawer-line);
	border-radius: 4px;
	background: var(--ugp-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23183e6f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
	color: var(--ugp-ink);
	font: inherit;
	font-size: 1.0714rem;
	appearance: none;
	cursor: pointer;
}

.pkp_structure_page .ugp .ugp-views {
	display: flex;
	padding: 3px;
	border: 1px solid var(--ugp-drawer-line);
	border-radius: 6px;
	background: var(--ugp-card);
}

.pkp_structure_page .ugp .ugp-views button {
	display: flex;
	align-items: center;
	gap: 0.4571rem;
	height: 2.4rem;
	margin: 0;
	padding: 0 0.8571rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: var(--ugp-muted);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.pkp_structure_page .ugp .ugp-views button[aria-pressed="true"] {
	background: var(--ugp-navy);
	color: var(--ugp-on-navy);
}

/* Without JavaScript the controls do nothing, so they are not shown */
html:not(.ugp-js) .pkp_structure_page .ugp .ugp-slip,
html:not(.ugp-js) .pkp_structure_page .ugp .ugp-toolbar {
	display: none;
}

/* The drawer */
.pkp_structure_page .ugp .ugp-drawer {
	padding: 1.7143rem 0 5.7143rem;
}

.pkp_structure_page .ugp .ugp-about {
	max-width: 70ch;
	margin: 0 0 1.7143rem;
}

.pkp_structure_page .ugp .cmp_announcements {
	margin-bottom: 2.2857rem;
}

/* The catalogue cards */
.pkp_structure_page .ugp .ugp-fichas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 34.2857rem), 1fr));
	gap: 1.7143rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pkp_structure_page .ugp .ugp-ficha {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.5429rem 1.7143rem 2.1714rem;
	background: var(--ugp-card);
	border-radius: 4px;
	box-shadow: var(--ugp-shadow-card);
}

.pkp_structure_page .ugp .ugp-fichas .ugp-ficha[hidden] {
	display: none;
}

/* Cards stay seated in the drawer; hover marks the title, not the card */
.pkp_structure_page .ugp .ugp-ficha:hover .ugp-ficha__name a {
	color: var(--ugp-navy);
	text-decoration: underline;
}

/* The rod hole punched through every catalogue card */
.pkp_structure_page .ugp .ugp-ficha::after {
	content: "";
	position: absolute;
	bottom: 0.5714rem;
	left: 50%;
	width: 1.0286rem;
	height: 1.0286rem;
	margin-left: -0.5143rem;
	border-radius: 50%;
	background: var(--ugp-drawer);
}

.pkp_structure_page .ugp .ugp-ficha__body {
	display: grid;
	grid-template-columns: 9.7143rem minmax(0, 1fr);
	gap: 1.5429rem;
	flex: 1;
}

.pkp_structure_page .ugp .ugp-ficha__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	align-self: start;
	padding: 3px;
	background: var(--ugp-cover-bg);
	border: 1px solid var(--ugp-card-line);
	border-radius: 2px;
	text-decoration: none;
}

.pkp_structure_page .ugp .ugp-ficha--logo .ugp-ficha__cover {
	padding: 0;
	background: var(--ugp-card);
}

.pkp_structure_page .ugp .ugp-ficha__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pkp_structure_page .ugp .ugp-ficha__initials {
	padding: 0.5714rem;
	color: var(--ugp-navy);
	font-family: var(--ugp-display);
	font-size: 1.7143rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	overflow-wrap: anywhere;
}

/* The catalogue card's single orange rule, under the journal's name */
.pkp_structure_page .ugp .ugp-ficha__name {
	margin: 0;
	padding-bottom: 0.7429rem;
	border-bottom: 2px solid var(--ugp-orange);
	font-family: var(--ugp-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.pkp_structure_page .ugp .ugp-ficha__name a {
	color: var(--ugp-ink);
	text-decoration: none;
}

.pkp_structure_page .ugp .ugp-ficha__name mark {
	background: #ffe1c9;
	color: inherit;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #ffe1c9;
}

.pkp_structure_page .ugp .ugp-ficha__desc {
	display: -webkit-box;
	margin: 0.8571rem 0 0;
	overflow: hidden;
	overflow-wrap: anywhere;
	color: var(--ugp-muted);
	font-size: 1.0714rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
}

.pkp_structure_page .ugp .ugp-ficha__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.7143rem;
	margin: 1.1429rem 0 0;
	padding-top: 0.6857rem;
	border-top: 1px dashed var(--ugp-card-line);
	font-size: 1.0714rem;
	font-weight: 600;
}

.pkp_structure_page .ugp .ugp-ficha__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.2857rem;
	color: var(--ugp-navy);
	text-decoration: none;
}

.pkp_structure_page .ugp .ugp-ficha__links a:hover {
	text-decoration: underline;
}

.pkp_structure_page .ugp .ugp-ficha__go svg {
	transition: transform 220ms var(--ugp-ease);
}

.pkp_structure_page .ugp .ugp-ficha__go:hover svg {
	transform: translateX(3px);
}

/* List view: one line per journal */
.pkp_structure_page .ugp .ugp-fichas.is-list {
	grid-template-columns: 1fr;
	gap: 0.5714rem;
}

.pkp_structure_page .ugp .is-list .ugp-ficha {
	display: grid;
	grid-template-columns: 3.4286rem minmax(0, 1fr) auto;
	grid-template-areas: "cover name links";
	align-items: center;
	column-gap: 1.1429rem;
	padding: 0.6857rem 1.1429rem;
}

.pkp_structure_page .ugp .is-list .ugp-ficha::after,
.pkp_structure_page .ugp .is-list .ugp-ficha__desc {
	display: none;
}

.pkp_structure_page .ugp .is-list .ugp-ficha__body,
.pkp_structure_page .ugp .is-list .ugp-ficha__text {
	display: contents;
}

.pkp_structure_page .ugp .is-list .ugp-ficha__cover {
	grid-area: cover;
}

.pkp_structure_page .ugp .is-list .ugp-ficha__name {
	grid-area: name;
	padding: 0;
	border: 0;
	font-size: 1.2143rem;
}

.pkp_structure_page .ugp .is-list .ugp-ficha__initials {
	padding: 0.1714rem;
	font-size: 0.7143rem;
}

.pkp_structure_page .ugp .is-list .ugp-ficha__links {
	grid-area: links;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Empty drawer */
.pkp_structure_page .ugp .ugp-empty {
	max-width: 38.8571rem;
	margin: 1.1429rem auto 0;
	padding: 2rem 2rem 2.2857rem;
	background: var(--ugp-card);
	border: 1px dashed #9fb0c8;
	border-radius: 4px;
	text-align: center;
}

.pkp_structure_page .ugp .ugp-empty[hidden] {
	display: none;
}

.pkp_structure_page .ugp .ugp-empty__title {
	margin: 0 0 0.4rem;
	font-family: var(--ugp-display);
	font-size: 1.3571rem;
	font-weight: 700;
}

.pkp_structure_page .ugp .ugp-empty p:not(.ugp-empty__title) {
	margin: 0;
	color: var(--ugp-muted);
}

.pkp_structure_page .ugp .ugp-empty__clear {
	margin-top: 1.2571rem;
	height: 3.1429rem;
	padding: 0 1.4286rem;
	border: 0;
	border-radius: 4px;
	background: var(--ugp-navy);
	box-shadow: none;
	color: var(--ugp-on-navy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.pkp_structure_page .ugp .ugp-empty__clear:hover {
	background: var(--ugp-navy-deep);
}

.pkp_structure_page .ugp .ugp-none {
	margin: 0;
	color: var(--ugp-muted);
}

/* Back to top: a navy tab at the lower right, in the outer margin on wide screens */
.pkp_structure_page .ugp .ugp-top {
	position: fixed;
	right: max(1.1429rem, calc((100vw - var(--ugp-wrap)) / 2 - 4.2857rem));
	bottom: 1.4286rem;
	z-index: 20;
	display: grid;
	place-items: center;
	width: 3.1429rem;
	height: 3.1429rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--ugp-navy);
	box-shadow: 0 2px 4px rgba(17, 41, 84, 0.2), 0 8px 18px -8px rgba(17, 41, 84, 0.45);
	color: var(--ugp-on-navy);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5714rem);
	transition: opacity 200ms var(--ugp-ease), transform 320ms var(--ugp-ease), visibility 0s linear 200ms;
}

.pkp_structure_page .ugp .ugp-top.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 200ms var(--ugp-ease), transform 320ms var(--ugp-ease), visibility 0s;
}

.pkp_structure_page .ugp .ugp-top:hover {
	background: var(--ugp-navy-deep);
}

::view-transition-group(*) {
	animation-duration: 320ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1000px) {
	.pkp_structure_page .ugp .ugp-intro {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: end;
		gap: 3.4286rem;
		padding-top: 1.7143rem;
		padding-bottom: 2rem;
	}

	.pkp_structure_page .ugp .ugp-title {
		font-size: 2.5714rem;
		white-space: nowrap;
	}

	.pkp_structure_page .ugp .ugp-lede {
		max-width: none;
	}

	.pkp_structure_page .ugp .ugp-slip {
		margin-top: 0;
	}
}

@media (max-width: 720px) {
	.pkp_structure_page .ugp .ugp-lede {
		font-size: 1.1429rem;
	}

	.pkp_structure_page .ugp .ugp-slip kbd {
		display: none;
	}

	.pkp_structure_page .ugp .ugp-slip input {
		padding-right: 1.1429rem;
	}

	.pkp_structure_page .ugp .ugp-toolbar {
		order: -1;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 0.2857rem;
	}

	.pkp_structure_page .ugp .ugp-views button span {
		display: none;
	}

	.pkp_structure_page .ugp .ugp-ficha {
		padding: 1.2571rem 1.2571rem 2rem;
	}

	.pkp_structure_page .ugp .ugp-ficha__body {
		grid-template-columns: 6.2857rem minmax(0, 1fr);
		gap: 1.1429rem;
	}

	.pkp_structure_page .ugp .ugp-ficha__name {
		font-size: 1.2857rem;
	}

	.pkp_structure_page .ugp .ugp-ficha__desc {
		-webkit-line-clamp: 4;
	}

	.pkp_structure_page .ugp .is-list .ugp-ficha {
		grid-template-columns: 3.4286rem minmax(0, 1fr);
		grid-template-areas: "cover name" "cover links";
	}

	.pkp_structure_page .ugp .is-list .ugp-ficha__links {
		margin-top: 0.2857rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pkp_structure_page .ugp *,
	.pkp_structure_page .ugp *::before,
	.pkp_structure_page .ugp *::after,
	::view-transition-group(*) {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Search label and language switch share one row above the search */
.pkp_structure_page .ugp .ugp-side {
	margin-top: 1.7143rem;
}

.pkp_structure_page .ugp .ugp-side__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5714rem;
}

.pkp_structure_page .ugp .ugp-side__head .ugp-slip__label {
	margin: 0;
}

html:not(.ugp-js) .pkp_structure_page .ugp .ugp-slip__label {
	display: none;
}

.pkp_structure_page .ugp .ugp-langs {
	display: flex;
	margin: 0 0 0 auto;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	list-style: none;
	overflow: hidden;
}

.pkp_structure_page .ugp .ugp-langs a {
	display: block;
	padding: 0.2286rem 0.7429rem;
	color: var(--ugp-on-navy);
	font-size: 0.9286rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.pkp_structure_page .ugp .ugp-langs a:hover {
	background: rgba(255, 255, 255, 0.14);
}

.pkp_structure_page .ugp .ugp-langs a[aria-current] {
	background: var(--ugp-on-navy);
	color: var(--ugp-navy);
}

@media (min-width: 1000px) {
	.pkp_structure_page .ugp .ugp-side {
		margin-top: 0;
	}
}