/* ==========================================================================
   Article actions — PDF download + Share buttons.
   Behavior: themes/web/js/frontend/article-actions.js
   ========================================================================== */

.content_article_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 28px 0;
	/* opt back in: .ScrollSmoother-wrapper sets pointer-events:none */
	position: relative;
	z-index: 3;
	pointer-events: all;
}

/* GP Inside: round buttons stacked in the gutter left of the article column;
   JS sets `top`/`left` against the first content block. */
.gp_inside_detail #gp_pdf_content {
	position: relative;
}

/* Opaque background so the fixed reveal-footer cannot bleed through gaps
   between sections. */
.gp_inside_detail #gp_pdf_content {
	background: #f7f7f7;
	background: var(--white-gp, #f7f7f7);
}

.black .gp_inside_detail #gp_pdf_content {
	background: #0f0f0f;
	background: var(--black-gp, #0f0f0f);
}

html.pdf-capturing #gp_pdf_content {
	background: #ffffff !important;
}

.gp_inside_detail .content_article_actions {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* above the article sections (z 3), below nav (20) and modal (998) */
	z-index: 5;
	margin: 0 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 1000px;
	padding: 0 24px;
	box-sizing: border-box;
	pointer-events: none; /* the buttons themselves re-enable it */
}

.gp_inside_detail .content_article_actions .article_action_btn,
.gp_inside_detail .content_article_actions .article_share_wrap {
	pointer-events: all;
}

/* Gutter rail: JS adds this when the layout leaves no room left of the
   content, pushing the article right exactly the space the buttons need
   (14 inset + 48 button + 24 gap). Breakpoints match each section's
   static-mode cutoff. */
@media screen and (min-width: 1101px) {
	.gp_inside_detail #gp_pdf_content.has-gutter-rail {
		padding-left: 86px;
		box-sizing: border-box;
	}
}

@media screen and (min-width: 1024px) {
	.project_detail #project_actions_root.has-gutter-rail {
		padding-left: 86px;
		box-sizing: border-box;
		/* opaque, or the fixed reveal-footer shows through the rail strip */
		background: #f7f7f7;
		background: var(--white-gp, #f7f7f7);
	}

	.black .project_detail #project_actions_root.has-gutter-rail {
		background: #0f0f0f;
		background: var(--black-gp, #0f0f0f);
	}
}

/* Narrow screens have no gutter: back in the flow above the text. Opaque
   background + padding (not margin) so the fixed footer cannot bleed through. */
@media screen and (max-width: 1100px) {
	.gp_inside_detail .content_article_actions {
		position: static;
		flex-direction: row;
		margin: 0;
		padding: 8px 24px 24px;
		background: #f7f7f7;
		background: var(--white-gp, #f7f7f7);
	}
	.black .gp_inside_detail .content_article_actions {
		background: #0f0f0f;
		background: var(--black-gp, #0f0f0f);
	}
}

/* Circular icon buttons: black, brand teal on hover; dark mode inverts. */
.article_action_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	color: var(--white);
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.article_action_btn:hover,
.article_action_btn:focus-visible {
	background: #003c3e;
	color: var(--white);
}

/* display:inline-flex outranks the UA's [hidden] rule */
.article_action_btn[hidden] {
	display: none !important;
}

/* On-image overlay: ring + shadow so the button reads on any photo. */
.content_article_actions.is-on-image .article_action_btn {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 12px rgba(0, 0, 0, 0.35);
}

body.black .article_action_btn {
	background: var(--white);
	color: #000;
}

body.black .article_action_btn:hover,
body.black .article_action_btn:focus-visible {
	background: #003c3e;
	color: var(--white);
}

/* Noticias: pill + share on one row; desktop pulls the share out to the
   gutter beside the first image. */
.news_detail .content_wrapper {
	position: relative;
}

.news_detail .content_news_actions {
	position: static; /* not a containing block: the desktop share resolves to .content_wrapper */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0 40px;
}

/* Desktop: JS sets top + left; -72px is the pre-JS fallback. */
@media screen and (min-width: 1024px) {
	.news_detail .content_news_actions > .content_article_actions {
		position: absolute;
		top: 0;
		left: -72px;
		z-index: 5;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Undo styles.css `.content_wrapper div { width:100% }` so these shrink to
   content and sit side by side. */
.news_detail .content_news_actions > .content_cta_download,
.news_detail .content_news_actions > .content_article_actions {
	margin: 0 !important;
	flex: 0 0 auto;
	width: auto !important;
}

.news_detail .content_news_actions .article_share_wrap {
	display: inline-flex !important;
	width: auto !important;
}

/* 44px to match the download pill height; GP Inside keeps 48px. */
.news_detail .content_news_actions .article_action_btn {
	width: 44px;
	height: 44px;
}

@media screen and (max-width: 767px) {
	.news_detail .content_news_actions .article_action_btn {
		width: 40px;
		height: 40px;
	}
}

/* Proyectos: share-only, pinned beside/over the first module image (usually
   on-image — full-bleed modules leave no gutter). */
.project_detail #project_actions_root {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.project_detail .content_article_actions {
		position: absolute;
		top: 14px;
		left: 14px; /* pre-JS fallback: image corner inset */
		z-index: 5;
		margin: 0;
		pointer-events: none; /* the button re-enables it */
	}

	.project_detail .content_article_actions .article_share_wrap {
		pointer-events: all;
	}
}

/* Narrow screens: back in the flow, same opaque background as GP Inside. */
@media screen and (max-width: 1023px) {
	.project_detail .content_article_actions {
		margin: 0;
		padding: 8px 24px 24px;
		background: #f7f7f7;
		background: var(--white-gp, #f7f7f7);
	}

	.black .project_detail .content_article_actions {
		background: #0f0f0f;
		background: var(--black-gp, #0f0f0f);
	}
}

.article_action_btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.article_action_btn.is-loading {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.article_action_btn[disabled] {
	pointer-events: none;
}

/* Share popover (desktop fallback when navigator.share is unavailable) */
.article_share_wrap {
	position: relative;
	display: inline-flex;
}

/* Mounted on <body> and fixed (JS sets top/left) to escape the article's
   stacking contexts. */
.article_share_menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	padding: 6px;
	border: 1px solid var(--soft-gray);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.article_share_menu[hidden] {
	display: none;
}

.article_share_item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--black-gp);
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.article_share_item:hover {
	background: var(--white-gp);
}

.article_share_item svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ------------------------ PDF capture mode -------------------------------
   The LIVE #gp_pdf_content is rasterized while .pdf-capturing is on <html>,
   hidden behind a full-screen overlay. ------------------------------------- */

.pdf_export_header {
	margin: 0 0 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid #ddd;
}

.pdf_export_title {
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 8px;
	color: #000;
	font-weight: 700;
}

.pdf_export_subtitle {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 400;
	margin: 0;
	color: #444;
}

html.pdf-capturing #smooth-content {
	transform: none !important;
}

/* 1. Reveal: undo the scroll-animation state so nothing is hidden/clipped. */
html.pdf-capturing #gp_pdf_content,
html.pdf-capturing #gp_pdf_content * {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	transition: none !important;
	filter: none !important;
	clip-path: none !important;
	overflow: visible !important;
	transform: none !important;
	box-shadow: none !important;
}

/* 2. Print column: collapse to a fixed 760px reading column (~A4 text width),
   pinned to the origin — html2canvas captures in document coordinates, so an
   offset column comes out sliced. */
html.pdf-capturing #gp_pdf_content {
	width: 760px !important;
	max-width: 760px !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	color: #111 !important;
}

/* 3. Strip section chrome (full-viewport heights, huge paddings, columns,
   sticky/absolute placement, dark backgrounds) and stack everything. */
html.pdf-capturing #gp_pdf_content section,
html.pdf-capturing #gp_pdf_content article,
html.pdf-capturing #gp_pdf_content aside,
html.pdf-capturing #gp_pdf_content div {
	display: block !important;
	position: static !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	float: none !important;
	inset: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

html.pdf-capturing #gp_pdf_content section {
	margin: 0 0 18px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* 4. Print typography. */
html.pdf-capturing #gp_pdf_content p,
html.pdf-capturing #gp_pdf_content li,
html.pdf-capturing #gp_pdf_content span {
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	color: #111 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

html.pdf-capturing #gp_pdf_content p {
	margin: 0 0 13px !important;
}

html.pdf-capturing #gp_pdf_content h1,
html.pdf-capturing #gp_pdf_content h2,
html.pdf-capturing #gp_pdf_content h3,
html.pdf-capturing #gp_pdf_content h4,
html.pdf-capturing #gp_pdf_content h5,
html.pdf-capturing #gp_pdf_content h6 {
	color: #000 !important;
	margin: 22px 0 10px !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
}

html.pdf-capturing #gp_pdf_content h1 { font-size: 22px !important; }
html.pdf-capturing #gp_pdf_content h2 { font-size: 19px !important; }
html.pdf-capturing #gp_pdf_content h3 { font-size: 17px !important; }
html.pdf-capturing #gp_pdf_content h4,
html.pdf-capturing #gp_pdf_content h5,
html.pdf-capturing #gp_pdf_content h6 { font-size: 15px !important; }

html.pdf-capturing #gp_pdf_content ul,
html.pdf-capturing #gp_pdf_content ol {
	margin: 0 0 13px 20px !important;
	padding: 0 !important;
}

html.pdf-capturing #gp_pdf_content li {
	margin: 0 0 6px !important;
	list-style: disc outside !important;
}

html.pdf-capturing #gp_pdf_content a {
	color: #111 !important;
	text-decoration: underline !important;
}

html.pdf-capturing #gp_pdf_content strong,
html.pdf-capturing #gp_pdf_content b {
	font-weight: 700 !important;
	color: #000 !important;
}

/* 5. Images: full column width, never split across a page break. */
html.pdf-capturing #gp_pdf_content img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 16px 0 !important;
	object-fit: contain !important;
}

/* 6. Drop purely decorative / non-rendering chrome. */
html.pdf-capturing #gp_pdf_content .content_bg,
html.pdf-capturing #gp_pdf_content .btn_back,
html.pdf-capturing #gp_pdf_content iframe,
html.pdf-capturing #gp_pdf_content .content_article_actions,
html.pdf-capturing #gp_pdf_content .content_cta_download {
	display: none !important;
}

/* Videos don't rasterize cleanly: keep them out of the snapshot. */
html.pdf-capturing #gp_pdf_content video {
	display: none !important;
}

/* Slick carousels: unwrap the track so every real slide stacks vertically. */
html.pdf-capturing #gp_pdf_content .slick-track {
	transform: none !important;
	width: auto !important;
	display: block !important;
}

html.pdf-capturing #gp_pdf_content .slick-slide {
	display: block !important;
	width: auto !important;
	float: none !important;
	margin-bottom: 12px;
}

html.pdf-capturing #gp_pdf_content .slick-cloned,
html.pdf-capturing #gp_pdf_content .slick-arrow,
html.pdf-capturing #gp_pdf_content .slick-dots {
	display: none !important;
}

/* Full-screen overlay shown during PDF generation. */
.pdf_capture_overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: rgba(255, 255, 255, 0.92);
}

.pdf_capture_spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--soft-gray);
	border-top-color: #003c3e;
	border-radius: 50%;
	animation: pdf_spin 0.8s linear infinite;
}

.pdf_capture_text {
	margin: 0;
	font-size: 14px;
	color: #003c3e;
	letter-spacing: 0.3px;
}

@keyframes pdf_spin {
	to { transform: rotate(360deg); }
}

/* Never print the on-screen action buttons if the user uses browser print. */
@media print {
	.content_article_actions {
		display: none !important;
	}
}