/* BeatLatin PHP App Shell — extras sobre style.css / app-shell.css */

body.bl-php-shell {
	--bl-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-family: var(--bl-font);
}

/*
 * .bl-app-shell en Elementor era un wrapper del HEADER (height:0 +
 * pointer-events:none) para que solo sidebar/topbar recibieran clicks.
 * En PHP el mismo wrapper envuelve sidebar + topbar + contenido + footer →
 * hay que restaurar layout y pointer-events o ⋯ / compra / play no responden.
 */
body.bl-php-shell .bl-app-shell {
	height: auto !important;
	min-height: 100% !important;
	pointer-events: auto !important;
}

body.bl-php-shell .bl-sidebar,
body.bl-php-shell .bl-topbar {
	pointer-events: auto !important;
}

body.bl-php-shell #bl-pjax-root.bl-page-content {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	min-height: 40vh;
	pointer-events: auto !important;
	/* Hueco bajo topbar fija (antes lo daba Elementor header height:0 + offset) */
	padding-top: var(--bl-content-offset) !important;
	padding-left: var(--bl-content-gutter, 12px) !important;
	padding-right: var(--bl-content-gutter, 12px) !important;
	padding-bottom: 80px !important;
}

body.admin-bar.bl-php-shell #bl-pjax-root.bl-page-content {
	padding-top: calc(var(--bl-content-offset) + 32px) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar.bl-php-shell #bl-pjax-root.bl-page-content {
		padding-top: calc(var(--bl-content-offset) + 46px) !important;
	}
}

@media (max-width: 1024px) {
	body.bl-php-shell #bl-pjax-root.bl-page-content {
		padding-top: var(--bl-content-offset) !important;
		padding-left: 28px !important;
		padding-right: 28px !important;
		padding-bottom: 68px !important;
	}

	body.admin-bar.bl-php-shell #bl-pjax-root.bl-page-content {
		padding-top: calc(var(--bl-content-offset) + 46px) !important;
	}
}

@media (max-width: 767px) {
	body.bl-php-shell #bl-pjax-root.bl-page-content {
		padding-left: 18px !important;
		padding-right: 18px !important;
		padding-bottom: 56px !important;
	}
}

/* Topbar sin wrappers Elementor
   Desktop: grid 3 cols. Móvil: flex 2 filas (mobile-topbar.css).
   NO forzar grid en ≤1024 — pisa el flex y apila ☰ / logo / acciones. */
@media (min-width: 1025px) {
	body.bl-php-shell .bl-topbar {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
}

body.bl-php-shell .bl-topbar-left,
body.bl-php-shell .bl-topbar-center,
body.bl-php-shell .bl-topbar-right {
	display: flex !important;
	align-items: center;
	min-width: 0;
}

body.bl-php-shell .bl-topbar-center {
	justify-content: center;
}

@media (min-width: 1025px) {
	body.bl-php-shell .bl-topbar-center {
		width: 100%;
	}
}

body.bl-php-shell .bl-topbar-right {
	justify-content: flex-end;
	gap: 8px;
}

/* Móvil: misma fila ☰|logo|acciones + search debajo; fondo opaco (sin glass ::before) */
@media (max-width: 1024px) {
	body.bl-php-shell .bl-topbar {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		align-content: flex-start !important;
		justify-content: flex-start !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		height: auto !important;
		min-height: var(--bl-topbar-height, 106px) !important;
		max-height: none !important;
		padding: 6px 10px 0 !important;
		background: var(--bl-bg, #1f1f1f) !important;
		background-color: var(--bl-bg, #1f1f1f) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	body.bl-php-shell .bl-topbar::before {
		display: none !important;
		content: none !important;
	}

	body.bl-php-shell .bl-topbar-left {
		flex: 0 0 40px !important;
		width: 40px !important;
		max-width: 40px !important;
		order: 1 !important;
	}

	body.bl-php-shell .bl-topbar-center {
		flex: 1 1 0 !important;
		width: auto !important;
		max-width: none !important;
		order: 2 !important;
		height: var(--bl-mobile-topbar-actions, 52px) !important;
	}

	body.bl-php-shell .bl-topbar-right {
		flex: 0 0 auto !important;
		width: auto !important;
		order: 3 !important;
		height: var(--bl-mobile-topbar-actions, 52px) !important;
	}

	body.bl-php-shell .bl-topbar-mobile-search-row {
		flex: 0 0 100% !important;
		width: 100% !important;
		order: 10 !important;
	}

	body.bl-php-shell .bl-mobile-menu-toggle {
		display: inline-flex !important;
	}
}

body.bl-php-shell .bl-mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 11px;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
}

[data-theme="light"] body.bl-php-shell .bl-mobile-menu-toggle {
	border-color: rgba(0, 0, 0, 0.12);
	color: rgba(0, 0, 0, 0.72);
}

@media (max-width: 1024px) {
	[data-theme="light"] body.bl-php-shell .bl-topbar {
		background: var(--bl-bg, #f5f5f7) !important;
		background-color: var(--bl-bg, #f5f5f7) !important;
	}
}

body.bl-php-shell .bl-sidebar-logo__text {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

body.bl-php-shell .bl-home {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 0 0 48px;
	/* Gutters ya van en #bl-pjax-root */
}

body.bl-php-shell .bl-home__section {
	min-width: 0;
}

/* Páginas WP genéricas (recibo EDD, etc.) */
body.bl-php-shell .bl-wp-page {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	padding-bottom: 32px;
}

body.bl-php-shell .bl-wp-page__title {
	margin: 0 0 20px;
	font-size: clamp(28px, 3.5vw, 36px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--bl-heading, inherit);
}

body.bl-php-shell .bl-wp-page__content {
	color: var(--bl-text, inherit);
	font-size: 15px;
	line-height: 1.6;
}

body.bl-php-shell .bl-wp-page__content > *:first-child {
	margin-top: 0;
}

body.bl-php-shell .bl-wp-page--404 .bl-wp-page__content a {
	color: var(--bl-red, #d90c0c);
}