:root {
	color-scheme: light;
	font-size-adjust: 0.5;
	/* =================================== */
	/* ===      SISTEMA SEMÁNTICO      === */
	/* =================================== */
	/* --- 6.1.2.1 Neutrales (Light) --- */
	--color-background-main: #FFFFFF;
	--color-text-title: #1A1A1A;
	--color-text-body: #595959;
	--color-text-secondary: #8C8C8C; /* íconos, placeholders */
	--text-color-contrast: #1A1A1A;
	--color-border: #D9D9D9;
	--color-background-subtle: #EFEFEF;
	--color-background-disabled: #F5F5F5;
	--color-text-disabled: #BFBFBF;
	/* --- 6.1.2.3 Primaria (Acción - Azul) --- */
	--color-primary-100: color-mix(in srgb, var(--color-primary-500) 4%, #fff 96%); /* Fondo Selección */
	--color-primary-300: #91D5FF; /* Bordes sutiles */
	--color-primary-500: #1375D8; /* Base Acciones */
	--color-primary-600: #096DD9; /* Hover */
	--color-primary-700: #0050B3; /* Active/Clic */
	/* --- 6.1.2.4 Peligro (Negativo - Rojo) --- */
	--color-danger-100: #FFF1F0;
	--color-danger-300: #FFA39E;
	--color-danger-500: #FF4D4F;
	--color-danger-600: #F5222D;
	--color-danger-700: #CF1322;
	/* --- 6.1.2.5 Sistema (Feedback) --- */
	--color-success-100: color-mix(in srgb, var(--color-success-500) 4%, #fff 96%);
	--color-success-500: #52C41A;
	--color-success-700: color-mix(in srgb, var(--color-success-500) 85%, #000 15%);
	--color-warning-500: #FAAD14;
	/* --- Colores Fijos (No cambian en Dark Mode) --- */
	--text-color-white: #FFFFFF;
	/* =================================== */
	/* ===       COLORES DE MARCA      === */
	/* =================================== */
	--max-shadow-color: color-mix(in srgb, var(--max-color) 15%, #fff 85%);
	--max-color: #ff0131;
	--max-color-hover: color-mix(in srgb, var(--max-color) 10%, #fff 90%);
	--max-color-hover-ligth: color-mix(in srgb, var(--max-color) 85%, #000 15%);
	--max-color-active: color-mix(in srgb, var(--max-color) 30%, #fff 70%);
	--admin-color: #0088e3;
	--admin-color-hover: color-mix(in srgb, var(--admin-color) 10%, #fff 90%);
	--admin-color-hover-light: color-mix(in srgb, var(--admin-color) 85%, #000 15%);
	--admin-color-active: color-mix(in srgb, var(--admin-color) 30%, #fff 70%);
	--piloto-color: #348260;
	--piloto-color-hover: color-mix(in srgb, var(--piloto-color) 10%, #fff 90%);
	--piloto-color-hover-light: color-mix(in srgb, var(--piloto-color) 85%, #000 15%);
	--piloto-color-active: color-mix(in srgb, var(--piloto-color) 30%, #fff 70%);
	--advice-color: #ef6a0e;
	--advice-color-hover: color-mix(in srgb, var(--advice-color) 10%, #fff 90%);
	--advice-color-hover-light: color-mix(in srgb, var(--advice-color) 85%, #000 15%);
	--advice-color-active: color-mix(in srgb, var(--advice-color) 30%, #fff 70%);
	/* =================================== */
	/* ===    LAYOUT Y TIPOGRAFÍA      === */
	/* =================================== */
	--body-width: 1200px;
	--body-width-report: 1320px;
	--font-size-tiny-base: var(--text-xs);
	--font-size-base: var(--text-base);
	--font-size-subtitle-base: var(--text-lg);
	--font-size-title-base: var(--text-2xl);
	--font-size-bigtitle-base: var(--text-3xl);
	--border-radius-base: var(--space-4);
	--font-family-base: "Roboto", sans-serif;
	/* =================================== */
	/* ===      DESIGN SYSTEM          === */
	/* =================================== */
	/* --- Spacing Scale (4px base grid) --- */
	--space-0: 0;
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px - base unit */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	/* --- Typography Scale (Fluid) --- */
	--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.35rem);
	--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	--text-3xl: clamp(1.875rem, 1.7rem + 1vw, 2.5rem);
	--text-4xl: clamp(2.25rem, 2rem + 1.25vw, 3rem);
	/* --- Line Heights --- */
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;
	/* --- Elevation System (Shadows) --- */
	--elevation-none: none;
	--elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--elevation-sm: 0 2px 4px 0 rgb(0 0 0 / 0.06);
	--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	/* --- Transition System (Motion) --- */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	/* --- Creative Easing (Micro-interactions) --- */
	--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-squish: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--transition-spring: 400ms var(--ease-elastic);
	--transition-smooth: 500ms var(--ease-out-expo);
	/* =================================== */
	/* ===  COMPATIBILIDAD (LEGACY)    === */
	/* =================================== */
	/* Mapeo de variables antiguas a nuevas para evitar rupturas */
	--primary-background-color: var(--color-background-main);
	--secondary-background-color: var(--color-background-subtle);
	--secondary-background-color-hover: var(--color-primary-100);
	--text-color: var(--color-text-title);
	--text-color-paragraph: var(--color-text-body);
	--text-color-secondary: var(--color-text-secondary);
	--border-color-base: var(--color-border);
	--border-color-card: var(--color-border);
	--opacidad-negro: 0.5;
	/* Variables específicas de componentes antiguos */
	--primary-color: var(--color-primary-500);
	--primary-color-hover: var(--color-primary-600);
	--footer-color: #b2001c; /* Color específico de marca */
	--gestor-footer-color-primary: whitesmoke;
	/* Variables Agro */
	--color-blue-agro: var(--color-primary-600);
	--color-blue-agro-hover: var(--color-primary-500);
	--color-agro-menu-hover: var(--color-primary-100); /* Azul muy claro */
}

html[data-theme='dark'] {
	color-scheme: dark;
	/* =================================== */
	/* === VARIABLES DINÁMICAS (DARK)  === */
	/* =================================== */
	/* --- 6.1.2.2 Neutrales (Dark) --- */
	--color-background-main: #1A1A1A;
	--color-text-title: #EFEFEF;
	--color-text-body: #D9D9D9;
	--color-text-secondary: #8C8C8C;
	--text-color-contrast: #1A1A1A;
	--color-border: #595959;
	--color-background-subtle: #2C2C2C;
	--color-background-disabled: #222222;
	--color-text-disabled: #757575;
	/* --- Ajustes de Marca en Dark --- */
	--footer-color: var(--color-background-subtle);
	/* Mapeo Legacy en Dark */
	--primary-background-color: var(--color-background-main);
	--secondary-background-color: var(--color-background-subtle);
	--text-color: var(--color-text-title);
	--text-color-paragraph: var(--color-text-body);
	--border-color-base: var(--color-border);
	--border-color-card: #2C2C2C;
	/* =================================== */
	/* ===       COLORES DE MARCA      === */
	/* =================================== */
	--max-shadow-color: color-mix(in srgb, var(--max-color) 15%, #000 85%);
	--max-color-hover: color-mix(in srgb, var(--max-color) 10%, #000 90%);
	--max-color-active: color-mix(in srgb, var(--max-color) 30%, #000 70%);
	--admin-color-hover: color-mix(in srgb, var(--admin-color) 10%, #000 90%);
	--admin-color-active: color-mix(in srgb, var(--admin-color) 30%, #000 70%);
	--piloto-color-hover: color-mix(in srgb, var(--piloto-color) 10%, #000 90%);
	--piloto-color-active: color-mix(in srgb, var(--piloto-color) 30%, #000 70%);
	--advice-color-hover: color-mix(in srgb, var(--advice-color) 10%, #000 90%);
	--advice-color-active: color-mix(in srgb, var(--advice-color) 30%, #000 70%);
	--color-primary-100: color-mix(in srgb, var(--color-primary-500) 15%, #000 85%); /* Fondo Selección */
	--color-agro-menu-hover: var(--color-primary-100);
}
/* --- Respect User Motion Preferences --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========================================================= */
/* ESTILOS GLOBALES                        */
/* ========================================================= */

:is( button, a, input, select, textarea, [role="button"], .ant-btn, .card-curso, .solution-card, .promo-card ) {
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

html, body, #app {
	height: 100%;
	margin: auto;
	padding: 0;
	font-family: var(--font-family-base);
	background-color: var(--color-background-main);
	color: var(--color-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#app {
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.d-none {
	display: none !important;
}
/* Blazor Error UI */
#blazor-error-ui {
	background: var(--color-warning-500);
	bottom: 0;
	box-shadow: var(--elevation-md);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
	color: black;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

/* Iconos */
.icon-default-color {
	min-width: 1rem;
	max-width: 4rem;
	max-height: 4rem;
	min-height: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-text-secondary);
}

.icon-color {
	color: var(--color-primary-500);
}
/* ================================================== */
/*                 ACCESSIBILITY ENHANCEMENTS         */
/* ================================================== */

/* --- Skip to Content Link (WCAG 2.1) --- */
.skip-to-content {
	position: absolute;
	top: -100%;
	left: 0;
	background: var(--color-primary-600);
	color: var(--text-color-white);
	padding: var(--space-3) var(--space-6);
	text-decoration: none;
	border-radius: 0 0 var(--border-radius-base) 0;
	z-index: 9999;
	transition: top var(--transition-fast);
	font-weight: 600;
}

	.skip-to-content:focus-visible {
		top: 0;
		outline: 3px solid var(--color-primary-500);
		outline-offset: 2px;
	}

/* Mejorar contraste en elementos disabled */
:is(button, .btn):disabled,
:is(input, select, textarea):disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ========================================================= */
/* FORMULARIOS Y CONTACTO                  */
/* ========================================================= */

.contact-general {
	max-width: var(--body-width);
	margin-inline: auto;
	padding: var(--space-8) var(--space-4);
}

.form-contact {
	max-width: var(--body-width);
	padding: var(--space-8);
}

.form-contact-input label {
	color: var(--color-text-body);
}

.thanks-contact {
	font-weight: 600;
	font-size: var(--font-size-bigtitle-base);
	padding: var(--space-16);
	text-align: center;
	color: var(--color-text-title);
}

.contact-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	justify-content: center;
}

/* Botón Submit / Primario Estándar */
.button-submit {
	background: var(--color-primary-500);
	border: 1px solid var(--color-primary-500);
	color: var(--text-color-white);
	border-radius: var(--border-radius-base);
	padding: 0.5rem 1rem;
	height: 100%;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-spring), box-shadow var(--transition-spring);
	cursor: pointer;

	&:hover {
		border-color: var(--color-primary-600);
		background: var(--color-primary-600);
		color: var(--text-color-white);
		transform: translateY(-2px) scale(1.02);
		box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-500) 40%, transparent);
	}

	&:active {
		background-color: var(--color-primary-700);
		border-color: var(--color-primary-700);
		transform: translateY(1px) scale(0.98);
		box-shadow: none;
	}

	&:disabled {
		transform: none;
		box-shadow: none;
	}
}

/* ========================================================= */
/* LAYOUT                             */
/* ========================================================= */

.ant-layout-header .ant-header {
	height: auto;
}

.site-layout-content {
	background: var(--color-background-main);
	flex: 1;
	width: 100%;
	min-height: 0;
}

.ant-layout-header {
	padding: 0rem;
}

.nav-identity {
	font-weight: bold;
}

.layout-header {
	background-color: var(--color-background-main);
	height: 6rem;
	border-bottom: .01rem solid var(--color-border);
}

.layout {
	background-color: var(--color-background-main);
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ========================================================= */
/* HERO SECTION                       */
/* ========================================================= */

.hero-general {
	max-width: var(--body-width);
	margin-inline: auto;
}

.hero-home {
	height: auto;
	width: 100%;
	max-width: 17rem;
	margin-bottom: 1.5rem;
	padding-top: .25rem;
}

.hero-card {
	background: var(--color-background-main);
}

h1.title-hero {
	font-weight: 400;
	font-size: var(--text-xl);
	line-height: 1.23;
	color: var(--color-text-title);
}

h2.subtitle-hero {
	font-weight: 300;
	font-size: var(--font-size-subtitle-base);
	line-height: 1.23;
	color: var(--color-text-body);
}

h3.text-hero {
	font-weight: 300;
	font-size: var(--font-size-tiny-base);
	line-height: 1.23;
	color: var(--color-text-body);
}

.text-hero img {
	height: auto;
	width: 4.5rem;
}

.hero-body {
	border-radius: 0rem 0rem 2rem 2rem;
	background-color: var(--color-agro-menu-hover);
	padding: 2.5rem 2.5rem;
	position: relative;
	padding-right: 3rem;
}

	.hero-body img {
		border-radius: 1rem;
		border: .05rem solid var(--color-border);
		max-width: 25.5rem;
		height: auto;
		object-fit: cover;
	}

.hero-body-img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Helpers para HeroAction */
.hero-col-end {
	justify-items: end;
}

.hero-img-harvest {
	max-width: 10.5rem;
}

.hero-img-livestock {
	max-width: 12.2rem;
}

.hero-img-crop {
	max-width: 26rem;
}

.ant-card-body {
	overflow: hidden;
	padding: 0rem;
}

/* ========================================================= */
/* MENÚ AGRO                          */
/* ========================================================= */

.menu-agro {
	text-align: center;
	padding: 2rem 0rem;
	background: var(--color-background-main);
}

.menu-agro-item {
	font-weight: 300;
	font-size: var(--font-size-tiny-base);
	border-radius: var(--border-radius-base) !important;
	border-bottom: none !important;
	transition: background-color var(--transition-base), color var(--transition-base);

	&:hover {
		background: var(--color-primary-100) !important;
	}

	&.ant-menu-item-selected {
		background: var(--color-primary-100) !important;
	}

	& a {
		color: var(--color-text-title) !important;

		&:hover, &.active {
			color: var(--color-primary-600) !important;
		}
	}
}

.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:focus::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after {
	border: none;
}

.p-agro {
	text-decoration-line: underline;
	text-decoration-color: var(--color-primary-500);
	text-decoration-thickness: .03rem;
	text-underline-position: under;
	text-underline-offset: 0.4rem;
}

	.p-agro p {
		margin-bottom: 0rem;
	}

h1.title-agro {
	font-weight: 400;
	font-size: var(--text-2xl);
	line-height: 1.23;
	text-align: center;
	padding: 3rem 0rem 0rem;
	color: var(--color-text-title);
}

/* ========================================================= */
/*                         FOOTER                            */
/* ========================================================= */

.gestormax-footer {
	background: var(--footer-color);
	color: var(--text-color-white);
	padding: 2rem 0;
	font-family: var(--font-family-base);
}

.gestormax-footer-header {
	max-width: var(--body-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	padding: 0 2rem;
}

.footer-section h3 {
	color: var(--text-color-white);
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: 1rem;
	letter-spacing: 0.05rem;
}

.footer-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-section li {
	margin-bottom: 1.25rem;
}

.footer-section a {
	color: var(--text-color-white);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

	.footer-section a:hover {
		opacity: 0.8;
	}

/* Contact Section */
.contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: 0.75rem;
	color: var(--text-color-white);
}

	.contact-item img {
		width: 16px;
		height: 16px;
		filter: brightness(0) invert(1);
	}

/* Social Media Section */
.social-links {
	display: flex;
	gap: var(--space-4);
	margin-top: 0.5rem;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--text-color-white);
	/* Performance: use only GPU-accelerated properties */
	transition: transform var(--transition-base), opacity var(--transition-base);

	&:hover {
		background-color: rgba(255, 255, 255, 0.3);
		transform: translateY(-2px) scale(1.05);
	}

	& svg {
		width: 20px;
		height: 20px;
	}
}

/* Bottom Bar */
.layout-footer {
	max-width: var(--body-width);
	margin-inline: auto;
	margin-top: 3rem;
	padding: 1rem 2rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
}

.text-footer {
	color: var(--text-color-white);
	font-size: var(--text-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.gestormax-footer-header {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.layout-footer {
		margin-top: 2rem;
	}
}

/* ========================================================= */
/* BOTONES DE MARCA                       */
/* ========================================================= */

/* Base común para botones deshabilitados */
.btn-max:disabled, .btn-admin:disabled, .btn-piloto:disabled, .btn-advice:disabled,
.button-submit:disabled, .btn-login:disabled, .btn-try:disabled {
	background-color: var(--color-background-disabled);
	color: var(--color-text-disabled);
	border-color: var(--color-border);
	cursor: not-allowed;
	box-shadow: none;
}

.btn-max {
	background-color: var(--max-color);
	color: var(--text-color-white);
	border-radius: var(--border-radius-base);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	border: 1px solid var(--max-color-hover-ligth);
	transition: all var(--transition-spring);

	&:hover {
		background-color: var(--max-color-hover-ligth);
		color: var(--text-color-white);
		transform: translateY(-2px) scale(1.02);
		box-shadow: 0 10px 20px -10px var(--max-shadow-color);
	}

	&:active {
		background-color: var(--max-color-active);
		color: var(--text-color-white);
		transform: translateY(1px) scale(0.98);
	}
}

.btn-admin {
	background-color: var(--admin-color);
	color: var(--text-color-white);
	border-radius: var(--border-radius-base);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	border: 1px solid var(--admin-color-hover-ligth);
	transition: all var(--transition-spring);

	&:hover {
		background-color: var(--admin-color-hover-light);
		color: var(--text-color-white);
		transform: translateY(-2px) scale(1.02);
		box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--admin-color) 40%, transparent);
	}

	&:active {
		background-color: var(--admin-color-active);
		color: var(--text-color-white);
		transform: translateY(1px) scale(0.98);
	}
}

.btn-piloto {
	background-color: var(--piloto-color);
	color: var(--text-color-white);
	border-radius: var(--border-radius-base);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	border: 1px solid var(--piloto-color-hover-ligth);
	transition: all var(--transition-spring);

	&:hover {
		background-color: var(--piloto-color-hover-light);
		color: var(--text-color-white);
		transform: translateY(-2px) scale(1.02);
		box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--piloto-color) 40%, transparent);
	}

	&:active {
		background-color: var(--piloto-color-active);
		color: var(--text-color-white);
		transform: translateY(1px) scale(0.98);
	}
}

.btn-advice {
	background-color: var(--advice-color);
	color: var(--text-color-white);
	border-radius: var(--border-radius-base);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	border: 1px solid var(--advice-color-hover-ligth);
	transition: all var(--transition-spring);

	&:hover {
		background-color: var(--advice-color-hover-light);
		color: var(--text-color-white);
		transform: translateY(-2px) scale(1.02);
		box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--advice-color) 40%, transparent);
	}

	&:active {
		background-color: var(--advice-color-active);
		color: var(--text-color-white);
		transform: translateY(1px) scale(0.98);
	}
}

/* ========================================================= */
/* REPORTES                           */
/* ========================================================= */

.report-general-title {
	padding: var(--space-3) var(--space-2);
	max-width: var(--body-width-report);
	margin-inline: auto;
	width: 100%;
	flex-wrap: nowrap;
	justify-content: start;
	display: flex;
}

.report-iframe {
	max-width: var(--body-width-report);
	margin-inline: auto;
}

h1.report-title-agro {
	margin-left: 1rem;
	font-size: var(--font-size-bigtitle-base) !important;
	color: var(--color-text-title);
}

iframe {
	width: 100%;
	aspect-ratio: 15/9;
}

.report-card-meta {
	margin: 1rem 1.5rem 0rem;
	display: flex;
	align-items: flex-start;
}

.report-card-meta-img {
	max-width: 2rem;
	margin-right: 1rem;
}

.report-card-meta-title {
	overflow: hidden;
	color: var(--color-text-title);
	font-weight: 400;
	font-size: var(--font-size-subtitle-base);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.report-card {
	background: var(--color-agro-menu-hover);
}

.report-card-body {
	padding: var(--space-4);
	max-width: var(--body-width);
	margin-inline: auto;
}

h2.report-card-title {
	font-weight: 400;
	color: var(--color-text-title);
	margin: 1em 2.5em;
}

.report-card-content {
	background-color: var(--color-background-main);
	border-radius: 1rem;
	border: 1px solid var(--color-border);
}

.cover-img {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base) !important;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.report-button-card {
	font-weight: 600;
	margin: 1rem 1.5rem;
	background-color: var(--color-primary-500);
	border-color: var(--color-primary-500);
	color: var(--text-color-white);
	border-style: solid;
	border-width: 1px;

	&:hover {
		background-color: var(--color-primary-600);
		border-color: var(--color-primary-600);
	}

	&:focus-visible,
	&:active {
		background-color: var(--color-primary-700);
		border-color: var(--color-primary-700);
		color: var(--text-color-white);
		outline: none;
	}
}

.report-general-content {
	padding: var(--space-4);
	max-width: var(--body-width-report);
	margin-inline: auto;
}

.report-general {
	background-color: var(--color-agro-menu-hover);
	width: 100%;
}

.ant-card-meta-title {
	overflow: hidden;
	color: var(--color-text-title);
	font-weight: 600;
	font-size: var(--font-size-subtitle-base);
	white-space: nowrap;
	text-overflow: ellipsis;
}


.ant-btn-icon-only > * {
	font-size: 1.5rem;
}

.ant-dropdown-menu {
	background-color: var(--color-background-main);
}

.btn-bulb {
	background: var(--color-background-main) !important;
	color: var(--color-text-body);
	border: 1px solid var(--color-border);
	transition: var(--transition-base);
	position: relative;
	overflow: hidden;
	line-height: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	contain: strict;
}

	.btn-bulb:hover {
		background: var(--color-background-subtle);
		color: var(--color-text-body);
		border: .05rem solid var(--color-border);
		transform: scale(1.05);
	}

	.btn-bulb:focus-visible {
		background: var(--color-background-main);
		outline: 2px solid var(--color-primary-500);
		outline-offset: 4px;
	}

	.btn-bulb:active {
		transform: rotate(180deg) scale(0.95);
		transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		animation: theme-pulse 0.6s ease-out;
	}

	.btn-bulb .anticon {
		transition: transform 0.3s ease;
		display: inline-block;
		line-height: 0;
		font-size: var(--text-lg);
	}

	.btn-bulb:hover .anticon {
		transform: scale(1.1);
	}

[data-theme='dark'] .btn-bulb .anticon {
	transform: rotate(180deg) scale(0.95);
}

@keyframes theme-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--color-primary-300);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

/* ========================================================= */
/*                               ANIMACION                   */
/* ========================================================= */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(50px);
	visibility: hidden;
	transition: opacity 0.8s ease-out, transform 0.6s ease-out;
}

	.reveal-on-scroll.is-visible {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

.will-animate {
	will-change: transform, opacity;
}

/* ========================================================= */
/* SOLUCIONES / GRID CARDS                  */
/* ========================================================= */

.grid-card {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 320px));
	gap: 2rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.content-hero {
	padding: 1.5rem 0rem;
}

.solution-header {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	overflow: hidden;
	min-height: 15rem;
	position: relative;
	z-index: 1;
}

.solution-header_text {
	text-align: left;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-content: center;
	flex-direction: column;
	align-items: flex-start;
	padding: 4rem 0rem;
	max-width: var(--body-width);
	margin-inline: auto;
}

	.solution-header_text h1 {
		line-height: 1.5;
		font-size: 3rem;
		color: var(--text-color-white);
		font-weight: 300;
	}

.solution-grid-card {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 336px));
	gap: var(--space-12) !important;
	justify-content: center;
	margin-bottom: var(--space-4);
	margin-inline: auto;
}

.solution-grid-integrant {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 540px));
	gap: var(--space-8);
	justify-content: center;
	margin-bottom: var(--space-4);
	margin-inline: auto;
	padding: 0 var(--space-8);
}

	.solution-grid-integrant b {
		color: var(--color-text-title) !important;
	}

	.solution-grid-integrant font {
		color: var(--color-text-body) !important;
	}

.solution-content h3 {
	text-align: center;
	margin-bottom: var(--space-8);
	color: var(--color-text-title);
	font-weight: 300;
	font-size: var(--text-xl);
}

.solution-content h2 {
	text-align: center;
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--color-text-title);
}

.solution-body {
	max-width: var(--body-width);
	margin-inline: auto;
	color: var(--color-text-body);
	font-size: var(--font-size-base);
}

	.solution-body .solution-content {
		color: var(--color-text-body);
		padding: var(--space-12);
	}

	.solution-body a {
		font-size: var(--font-size-tiny-base);
		font-weight: 400;
	}

.solution-card {
	color: var(--color-text-body);
	text-align: center;
	/* Performance: isolate rendering */
	contain: layout style paint;

	& p {
		font-size: var(--text-lg);
		text-align: justify;
		color: var(--color-text-body);
	}

	& h4 {
		font-size: var(--text-xl);
		font-weight: 700;
		margin-top: var(--space-8);
		color: var(--color-text-title);
	}
}

.solution-grid-hero {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 540px));
	place-content: start space-evenly;
	align-items: flex-start;
	grid-gap: var(--space-5);
	color: var(--color-text-title);
}

	.solution-grid-hero li {
		color: var(--color-text-body);
	}

	.solution-grid-hero p {
		color: var(--color-text-body);
	}

	.solution-grid-hero h3 {
		font-size: var(--text-2xl);
		font-weight: 700;
		margin-top: 2rem;
		text-align: left;
		color: var(--color-text-title);
	}

	.solution-grid-hero h4 {
		font-size: var(--font-size-title-base);
		color: var(--color-text-secondary);
		font-weight: 600;
		margin-top: 2rem;
		text-align: left;
		padding: 0rem;
		margin: 0rem;
	}

	.solution-grid-hero img {
		max-width: 100%;
		height: auto;
	}

.solution-text p {
	text-align: center;
}

@media(max-width: 1200px) {
	.box-1 {
		grid-row: 2;
	}
}

/* ========================================================= */
/* ANT DESIGN COMPONENTS              */
/* ========================================================= */

.ant-collapse {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: var(--color-text-body);
	font-size: 14px;
	line-height: 1.5715;
	background-color: var(--color-background-subtle);
	border: 1px solid var(--color-border);
	border-radius: 2px;
}

.ant-collapse-content {
	color: var(--color-text-body);
	background-color: var(--color-background-main);
	border-top: 1px solid var(--color-border);
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
	color: var(--color-text-title);
	line-height: 1.5715;
	cursor: pointer;
}

.ant-collapse > .ant-collapse-item {
	border-bottom: 1px solid var(--color-border);
}

/* ========================================================= */
/* FAQ                             */
/* ========================================================= */

.faq-body {
	max-width: var(--body-width);
	margin-inline: auto;
	color: var(--color-text-body);
	font-size: var(--font-size-base);
	padding: 4rem 0rem
}

.faq-content a {
	color: var(--color-primary-500);
}

	.faq-content a:hover {
		color: var(--color-primary-600);
	}

.faq-content .ant-collapse-item, .faq-content .ant-collapse {
	border-radius: var(--border-radius-base);
	overflow: hidden;
}

.faq-content p {
	font-size: var(--font-size-base);
	font-weight: 300;
	color: var(--color-text-body);
}

.faq-content h2 {
	font-size: var(--font-size-subtitle-base);
	font-weight: 300;
	margin-bottom: 2rem;
	color: var(--color-text-title);
}

.faq-content h1 {
	font-size: var(--font-size-bigtitle-base);
	font-weight: 500;
	margin: 0rem;
	padding: 0rem;
	color: var(--color-text-title);
}

@media(max-width: 1200px) {
	.faq-body {
		padding: 4rem 2rem
	}

	.content-hero {
		padding: 2rem;
	}

	.ant-layout-header {
		padding: 0rem 0rem;
	}

	.ant-layout-footer {
		padding: 1rem 3rem;
	}

	h1.title-agro {
		padding: 1rem 1rem 0rem;
		font-size: var(--font-size-bigtitle-base);
		color: var(--color-text-title);
	}

	h2.report-card-title {
		color: var(--color-text-title);
		margin: 1em 1.5em;
	}

	.gestormax-footer {
		padding: 1rem 2rem;
	}

	.solution-header_text {
		padding: 2rem 2rem;
	}

		.solution-header_text h1 {
			font-size: 2.5rem;
		}
}

/* ========================================================= */
/* CAROUSEL                           */
/* ========================================================= */

.carousel-container {
	position: relative;
	width: 100%;
	margin: auto;
	overflow: hidden;
	box-shadow: var(--elevation-md);
}

.carousel-slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.carousel-slide {
	min-width: 100%;
	box-sizing: border-box;
	position: relative;
}

	.carousel-slide img {
		width: 100%;
		max-height: 28rem;
		min-height: 20rem;
		display: block;
		object-fit: cover;
	}

.slide-caption {
	position: absolute;
	top: 25%;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
	color: var(--text-color-white);
	padding: 40px 20px 40px 20px;
	text-align: center;
}

	.slide-caption h3 {
		color: var(--text-color-white);
		font-size: var(--text-4xl);
		font-weight: bold;
	}

	.slide-caption p {
		margin: 0;
		font-size: var(--font-size-base);
	}

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.3);
	color: var(--text-color-white);
	border: none;
	padding: 10px 15px;
	font-size: 1.5rem;
	cursor: pointer;
	z-index: 10;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.2s ease;
}

	.carousel-arrow:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.carousel-arrow.prev {
		left: 15px;
	}

	.carousel-arrow.next {
		right: 15px;
	}

.carousel-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.dot {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

	.dot:hover {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.dot.active {
		background-color: var(--text-color-white);
	}

@media (max-width: 992px) {
	.slide-caption h3 {
		font-size: var(--text-2xl);
	}

	.carousel-arrow {
		background-color: rgba(0, 0, 0, 0.2);
	}

		.carousel-arrow.prev {
			top: 60%;
			left: 15px;
		}

		.carousel-arrow.next {
			top: 60%;
			right: 15px;
		}

	.dot {
		display: none;
	}
}

/* ========================================================= */
/* FORMATION                           */
/* ========================================================= */

.formation-home {
	max-width: var(--body-width);
	margin-inline: auto;
	display: flex;
	gap: var(--space-16);
	flex-direction: row;
	flex-wrap: nowrap;
	padding: var(--space-2) 0;
}

.formation-sider {
	flex: 0 0 14rem;
	border: 1px solid var(--color-border);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--border-radius-base);
	height: fit-content;
}

.formation-body {
	flex: 1;
	color: var(--color-text-secondary);
}

.sidebar-filtros {
	flex: 0 0 250px;
}

.contenido-cursos {
	flex: 1;
}

.filtro-grupo {
	margin-bottom: var(--space-6);
}

	.filtro-grupo h5 {
		font-size: var(--font-size-subtitle-base);
	}

.btn-aplicar-filtros {
	width: 100%;
	padding: 10px;
	background-color: var(--max-color);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 1rem;
}

	.btn-aplicar-filtros:hover {
		background-color: var(--max-color-hover);
	}

.barra-busqueda {
	display: flex;
	margin: var(--space-4) 0;
}

	.barra-busqueda input {
		flex-grow: 1;
	}

	.barra-busqueda span {
		border-radius: var(--border-radius-base);
	}

.card-curso {
	display: flex;
	gap: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);
	padding: var(--space-4);
	margin-bottom: var(--space-6);
	max-height: 12rem;
	background-color: var(--color-background-subtle);
	transition: transform var(--transition-spring), box-shadow var(--transition-spring), border-color var(--transition-base);
	content-visibility: auto;
	contain-intrinsic-size: 0 12rem;
	/* Performance: isolate rendering */
	contain: layout style paint;

	& img {
		max-width: 16rem;
		max-height: 12rem;
		object-fit: cover;
		border-radius: var(--border-radius-base);
	}

	&:hover {
		box-shadow: var(--elevation-xl);
		border-color: var(--color-primary-300);
		transform: translateY(-5px);
	}
}

.card-curso-cuerpo {
	flex: 1;
	justify-content: space-between;
	flex-direction: column;
	display: flex;
}

.card-curso-titulo {
	font-size: var(--font-size-title-base);
	font-weight: bold;
	margin: 0 0 var(--space-2) 0;
	color: var(--color-text-title);
}

.card-curso-descripcion, .card-curso-responsable {
	font-size: var(--font-size-base);
	color: var(--color-text-body);
	margin: 0.2rem 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.card-curso-enlace {
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card-enlace {
	text-decoration: none;
}

/* Inputs */
.form-control {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text-body);
	background-color: var(--color-background-main);
	border: 1px solid var(--color-border);
	border-radius: var(--space-1);
	transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);

	&:focus {
		border-color: var(--color-primary-500);
		box-shadow: 0 0 0 4px var(--color-primary-100);
		outline: none;
	}
}

.form-check {
	margin-bottom: var(--space-4);
	display: flex;
	flex-direction: column;
}

.filtro-toggle-btn {
	display: none;
}

@media (max-width: 992px) {
	.formation-home {
		flex-direction: column;
		gap: 2rem;
		padding: 1.5rem 1rem;
	}

	.formation-sider {
		flex-basis: 100%;
		position: static;
		top: 0;
		height: auto;
		border: none;
		padding: 0;
		border-radius: 0;
	}

	.filtro-toggle-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0.75rem 1rem;
		font-size: 1rem;
		font-weight: 500;
		background-color: var(--color-background-subtle);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-base);
		cursor: pointer;
		text-align: left;
	}

	.filtros-contenido {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out, border 0.25s ease-in-out;
		border: 0px solid var(--color-border);
		padding: .5rem 0rem 0rem .5rem;
		margin-top: -0.75rem;
		border-top: none;
		border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 2rem;
	}

		.filtros-contenido.visible {
			max-height: 40rem;
			padding: 1.5rem 0rem 0rem 1.5rem;
			border-width: 1px;
		}

	.icono-flecha {
		border: solid var(--color-text-title);
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 3px;
		transform: rotate(45deg);
		transition: transform 0.3s ease;
	}

		.icono-flecha.abierto {
			transform: rotate(-135deg);
		}
}

@media (max-width: 576px) {
	.card-curso {
		flex-direction: column;
		max-width: 380px;
		max-height: none;
		margin-inline: auto;
		gap: 1rem;
	}

		.card-curso img {
			max-width: 100%;
			height: auto;
			max-height: 12rem;
		}

	.card-curso-cuerpo {
		gap: 1rem;
	}

	.card-curso-enlace {
		text-align: left;
		margin-top: 1rem;
	}

	.card-enlace {
		text-align: center;
		width: 100%;
	}

	.formation-home {
		padding: 1rem 2rem;
	}
}

.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
	border-right-width: 1px;
	z-index: 1;
}

.ant-input-affix-wrapper focus, .ant-input-affix-wrapper-focused {
	border-right-width: 1px;
	outline: 0;
}

.clients-container {
	column-count: 1;
	column-gap: 2rem;
	padding: var(--space-8) var(--space-8)
}

@media (min-width: 992px) {
	.clients-container {
		column-count: 2;
		padding: var(--space-8) var(--space-0)
	}
}

.break-inside-avoid {
	break-inside: avoid;
	page-break-inside: avoid;
}
/* Sidebar  */
.virtual-nav-container {
	max-height: 60vh;
	overflow-y: auto;
	display: block;
	padding-right: 4px !important;
}

	.virtual-nav-container ul {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
		padding-right: 0.5rem !important;
		margin: 0 !important;
		list-style: none !important;
	}

	.virtual-nav-container::-webkit-scrollbar {
		width: 6px;
	}

	.virtual-nav-container::-webkit-scrollbar-track {
		background: transparent;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.virtual-nav-container::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 10px;
		border: 1px solid transparent;
	}

		.virtual-nav-container::-webkit-scrollbar-thumb:hover {
			background-color: rgba(255, 255, 255, 0.4);
		}

.sidebar-wrapper {
	transition: opacity 0.3s ease-in-out, filter 0.3s ease;
}

.sidebar-updating {
	opacity: 0.6;
	pointer-events: none;
	filter: grayscale(30%);
	cursor: wait;
}
/* ========================================================= */
/* NAVEGACIÓN                            */
/* ========================================================= */
.image-carousel {
	width: 100%;
	height: auto;
}

.nav-collapse-container-formation {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: var(--body-width);
	margin-inline: auto;
	padding: 1rem 0rem 0rem 0rem;
}

.product-item-formation {
	display: flex;
	align-items: center;
	background-color: var(--color-primary-500);
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--border-radius-base);
	text-decoration: none;
	color: var(--text-color-white);
	font-weight: 500;
	transition: transform var(--transition-base), opacity var(--transition-base);

	&:hover {
		transform: translateY(-4px) scale(1.02);
		background-color: var(--color-primary-600);
		color: var(--text-color-white);
	}

	&.active {
		background-color: var(--color-primary-700);
		color: var(--text-color-white);
	}
}

.nav-links-formation {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
}

.nav-link-formation {
	text-decoration: none;
	color: var(--text-color-secondary);
	font-weight: 400;
	font-size: var(--text-sm);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--border-radius-base);
	border: .1rem solid var(--text-color-secondary);
	background: transparent;
}

	.nav-link-formation:hover {
		border-color: var(--color-text-body);
		color: var(--color-text-body);
	}

	.nav-link-formation.active {
		color: var(--color-text-title);
		border-color: var(--color-text-title);
	}


@media (max-width: 768px) {
	.nav-collapse-container-formation {
		padding: 1rem;
	}

	.nav-links-formation {
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		width: 100%;
	}

	.ant-col-offset-4 {
		margin-left: 0%;
	}
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.top-nav {
	position: relative;
}

.nav-container {
	max-width: var(--body-width);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 6rem;
}

.navbar-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-text-title);
	z-index: 1001;
}

.brand-name {
	font-size: var(--text-2xl);
	font-weight: bold;
	margin-left: var(--space-2);
}

.ant-collapse > .ant-collapse-item:last-child {
	border-radius: 0rem 0rem 1rem 1rem !important;
}

.nav-collapse-container {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.nav-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--space-6);
}

.nav-link {
	text-decoration: none;
	color: var(--color-text-body);
	font-weight: 600;
	font-size: var(--text-base);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	transition: color 0.2s ease-in-out;
}

	.nav-link.active {
		color: var(--color-primary-500);
	}

	.nav-link:hover {
		color: var(--color-primary-600);
	}

.mark-home-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	padding: 1rem;
}

.partner-logo-group {
	object-fit: contain;
	max-width: 100%;
	height: auto;
	opacity: 0.6;
	mix-blend-mode: luminosity;
	transition: opacity var(--transition-base);

	&:hover {
		opacity: 1;
		mix-blend-mode: normal;
	}
}

.btn-grid-home {
	display: flex;
	flex-direction: column;
	justify-items: flex-start;
	gap: var(--space-4);
}

.btn-home {
	font-size: var(--font-size-subtitle-base) !important;
	padding: .5rem 2rem;
	max-width: 100%;
	color: var(--text-color-white) !important;
	border-radius: var(--border-radius-base);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

	.btn-home:hover {
		color: var(--text-color-white);
		transform: translateY(-2px);
	}

	.btn-home:active {
		transform: translateY(0);
	}

.title-solucion-home {
	margin: 6rem 0rem;
}

@media (max-width: 992px) {
	.btn-home {
		font-size: var(--text-base) !important;
		padding: var(--space-3) var(--space-6);
		max-width: 100%;
		white-space: normal;
		text-align: left;
		line-height: var(--leading-snug);
		min-height: var(--space-12);
	}

	.title-solucion-home {
		margin: var(--space-4) 0;
	}

	.btn-grid-home {
		gap: var(--space-3);
	}
}

@media (max-width: 576px) {
	.btn-home {
		font-size: var(--text-sm) !important;
		padding: var(--space-3) var(--space-4);
		line-height: var(--leading-tight);
	}

	.btn-grid-home h3 {
		font-size: var(--text-base);
		margin-bottom: var(--space-3);
	}
}

.btn {
	padding: 1rem 1rem;
	border-radius: var(--border-radius-base);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	line-height: var(--leading-none) !important;
}

.btn-login {
	color: var(--gestor-footer-color-primary);
	background-color: var(--color-primary-500);
	border: none;
	font-size: var(--text-base);
}

	.btn-login:hover {
		background-color: var(--color-primary-600);
		color: var(--text-color-white);
	}

.btn-try {
	background-color: var(--color-primary-500);
	color: var(--text-color-white);
	border: none;
	cursor: pointer;
}

	.btn-try:hover {
		background-color: var(--color-primary-600);
		color: var(--text-color-white);
	}

/* TABLAS */
.ant-table-thead > tr > th {
	color: var(--color-text-title);
	background-color: var(--color-background-subtle);
}

.ant-table-tbody > tr > td {
	color: var(--color-text-body);
}

.ant-table-bordered .ant-table-thead > tr > th,
.ant-table-bordered .ant-table-tbody > tr > td {
	border-color: var(--color-border);
}

.ant-table-tbody > tr.ant-table-row-selected > td {
	background: var(--color-primary-100);
}

/* --- Base Dropdown --- */
.dropdown {
	position: relative;
}

.dropdown-chevron {
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	display: inline-block;
	vertical-align: middle;
}

.dropdown-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	width: max-content;
	padding: 1.5rem;
	z-index: 1050;
	background-color: var(--color-background-main);
	border-radius: var(--border-radius-base);
	box-shadow: var(--elevation-lg);
	border: 1px solid var(--color-border);
	transform-origin: top center;
	visibility: hidden;
	opacity: 0;
	transform: translateX(-50%) scaleY(0.9);
	transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s;
}

/* --- Estado ABIERTO (Desktop) --- */
@media (min-width: 993px) {
	.dropdown:hover .dropdown-menu,
	.dropdown.show .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateX(-50%) scaleY(1);
	}

	.dropdown:hover .dropdown-chevron,
	.dropdown.show .dropdown-chevron {
		transform: rotate(180deg);
	}

	.dropdown-content {
		display: grid;
		grid-template-columns: repeat(2, minmax(250px, 350px));
		gap: var(--space-6);
	}
}

@media (max-width: 992px) {
	.dropdown-menu {
		position: static;
		box-shadow: none;
		border: none;
		padding: 0.5rem 0 0 1rem;
		width: 100%;
		transform: none;
		transition: none;
		display: none;
	}

	.dropdown.show .dropdown-menu {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
		animation: fadeInItem 0.3s ease forwards;
	}

	.dropdown-content {
		grid-template-columns: 1fr;
	}
}

@keyframes fadeInItem {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dropdown:hover .dropdown-content > *,
.dropdown.show .dropdown-content > * {
	animation: fadeInItem 0.3s ease backwards;
}

	.dropdown:hover .dropdown-content > *:nth-child(1) {
		animation-delay: 0.1s;
	}

	.dropdown:hover .dropdown-content > *:nth-child(2) {
		animation-delay: 0.2s;
	}

	.dropdown:hover .dropdown-content > *:nth-child(3) {
		animation-delay: 0.3s;
	}

	.dropdown:hover .dropdown-content > *:nth-child(4) {
		animation-delay: 0.4s;
	}

.dropdown.force-close .dropdown-menu {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: none !important;
}

.formation-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	text-decoration: none;
	color: var(--color-text-title);
	font-weight: 400;
	transition: background-color 0.2s, transform 0.2s;
	line-height: var(--leading-tight);
	justify-items: center;
	font-size: var(--text-xs);
}

	.formation-link a {
		border-radius: var(--border-radius-base);
		border: .01rem solid var(--color-primary-300);
		padding: var(--space-1) var(--space-2);
		background: var(--color-primary-500);
		color: var(--text-color-white);
	}

		.formation-link a:hover {
			background: var(--color-primary-600);
			color: var(--text-color-white);
		}

		.formation-link a.active {
			background: var(--color-primary-700);
			color: var(--text-color-white);
		}

.formation-links {
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	border-right: 1px solid var(--color-border);
}

	.formation-links h3 {
		color: var(--color-text-title);
		font-size: var(--text-base);
	}

.subformation-links {
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

	.subformation-links h3 {
		color: var(--color-text-title);
		font-size: var(--text-base);
	}

.badge-formation {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
	background-color: var(--max-color-hover);
	text-align: center;
	vertical-align: baseline;
	border-radius: 0.375rem;
	margin-left: 0.1em;
}

.promo-card-g4 {
	background-color: #2C2C2C !important;

	& h5 {
		color: var(--text-color-white) !important;
	}
}

.promo-card {
	background-color: var(--color-background-subtle);
	border-radius: var(--border-radius-base);
	padding: var(--space-2) var(--space-4);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-6);
	text-decoration: none;
	color: var(--color-text-title);
	align-items: center;
	margin-right: 1.5rem;
	transition: transform 0.2s;
	contain: layout style paint;

	& span {
		line-height: 1.2rem;
		text-align: justify;
	}

	.promo-card:hover {
		transform: translateY(-4px);
	}

	.promo-card h5 {
		margin: 0rem;
		font-size: var(--text-base);
		font-weight: 600;
	}

	.promo-card a.active h5 {
		color: var(--max-color);
	}
}

.promo-links {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.promo-title {
	display: flex;
	flex-direction: row;
	max-height: 4rem;
	width: 100%;
	justify-content: flex-start;
	color: var(--color-text-title);

	& h5 {
		color: var(--color-text-title);
		font-size: var(--text-base);
	}
}


.arrow {
	transition: transform 0.2s;
	display: inline-block;
}

.promo-card:hover .arrow {
	transform: translateX(4px);
}

@media (max-width: 992px) {
	.formation-links {
		overflow: auto;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		border-right: none;
	}

	.promo-card {
		margin-right: 0rem;
	}
}

.product-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-right: 1.5rem;
	border-right: 1px solid var(--color-border);
}

	.product-links h3 {
		color: var(--color-text-title);
		font-size: var(--text-base);
	}

.product-item {
	display: flex;
	align-items: center;
	background-color: var(--color-background-subtle);
	gap: 1.5rem;
	padding: 1rem;
	border-radius: var(--border-radius-base);
	text-decoration: none;
	color: var(--color-text-title);
	font-weight: 500;
	transition: background-color 0.2s, transform 0.2s;
}

	.product-item:hover {
		transform: translateY(-4px);
	}

.subproduct-links {
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

	.subproduct-links h3 {
		color: var(--color-text-title);
		font-size: var(--text-base);
	}

.link:hover {
	background-color: var(--color-primary-100);
	color: var(--color-text-title);
}

.link.active {
	background-color: var(--color-primary-100);
	color: var(--color-text-title);
}

.max-link:hover, .max-link.active {
	background-color: var(--max-color-hover);
	color: var(--max-color);
}

.piloto-link:hover, .piloto-link.active {
	background-color: var(--piloto-color-hover);
	color: var(--piloto-color);
}

.admin-link:hover, .admin-link.active {
	background-color: var(--admin-color-hover);
	color: var(--admin-color);
}

.advice-link:hover, .advice-link.active {
	background-color: var(--advice-color-hover);
	color: var(--advice-color);
}

.product-item-title {
	display: flex;
	flex-direction: column;
	line-height: 1.2rem;
	font-size: var(--text-base);
	font-weight: 600;
}

	.product-item-title span {
		font-weight: 400;
		font-size: var(--text-sm) !important;
		color: var(--color-text-body);
	}

.icon-bg {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-primary-500);
}

	.icon-bg img {
		width: 2rem;
		height: 2rem;
	}

.overview-image {
	flex-grow: 1;
	background: linear-gradient(135deg, #fce7f3, #e0e7ff);
	border-radius: 8px;
	margin-bottom: 1rem;
}

.whats-new-image {
	max-width: 20rem;
	max-height: 4rem;
	padding: .5rem;
}

/* Menu Hamburguesa */
.hamburger-btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	z-index: 1001;
	position: relative;
	width: 30px;
	height: 30px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hamburger-line {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-body);
	border-radius: 2px;
	position: absolute;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.top-line {
	transform: translateY(-8px);
}

.mid-line {
	transform: translateY(0);
}

.bot-line {
	transform: translateY(8px);
}

.hamburger-btn.open .top-line {
	transform: translateY(0) rotate(45deg);
}

.hamburger-btn.open .mid-line {
	opacity: 0;
}

.hamburger-btn.open .bot-line {
	transform: translateY(0) rotate(-45deg);
}

.product-link .dropdown-chevron {
	transition: transform 0.2s ease-in-out;
}

.dropdown-chevron {
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* Animación suave */
}

.dropdown.show .dropdown-chevron {
	transform: rotate(180deg);
}

.nav-hambuger-menu {
	display: none;
}

@media (max-width: 992px) {
	.hamburger-btn {
		display: flex;
	}

	.nav-collapse-container {
		display: none;
	}

		.nav-collapse-container:not(.collapsed) {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 1.5rem;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background-color: var(--color-background-main);
			padding: 1.5rem 2rem;
			border-bottom: 1px solid var(--color-border);
			box-shadow: var(--elevation-md);
			z-index: 1000;
		}

	.nav-links {
		flex-direction: column;
		width: 100%;
		gap: 0.5rem;
	}

	.nav-actions {
		flex-direction: column;
		width: 100%;
		gap: 0.5rem;
	}

	.btn {
		width: 100%;
		text-align: center;
	}

	.dropdown.show .dropdown-menu {
		display: block;
		position: static;
		transform: none;
		width: 100%;
		box-shadow: none;
		border: none;
		animation: none;
		opacity: 1;
	}

	.dropdown.show .dropdown-menu {
		animation: fadeInItem 0.3s ease forwards;
	}

	.dropdown-content {
		grid-template-columns: 1fr;
	}

	.product-links {
		border-right: none;
		padding-right: 0;
	}

	.dropdown .dropdown-menu {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		padding: 0.5rem 0 0 1rem;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		background-color: transparent;
	}

	.dropdown.mobile-dropdown-show .dropdown-menu {
		display: block;
	}

	.dropdown.mobile-dropdown-show .product-link .dropdown-chevron {
		transform: rotate(180deg);
	}

	.dropdown.mobile-dropdown-show .dropdown-toggle .dropdown-chevron {
		transform: rotate(180deg);
	}

	.top-nav {
		padding: 0rem 2rem;
	}

	.nav-actions {
		display: none;
	}

	.nav-hambuger-menu {
		display: flex;
		justify-content: space-between;
		gap: 1.5rem;
		align-items: center;
		height: 6rem;
		line-height: 0px !important;
	}
}

/* ========================================================= */
/* QUIZ BLOCK                          */
/* ========================================================= */

.quiz-block {
	background-color: var(--color-background-main);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);
	padding: var(--space-6);
	font-family: var(--font-family-base);
	margin: var(--space-4) var(--space-0);
}

.quiz-question-container {
	margin-bottom: var(--space-8);
}

.quiz-question {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text-title);
	margin-bottom: var(--space-4);
}

.answer-option {
	background-color: var(--color-background-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);
	margin-bottom: var(--space-2);
	padding: var(--space-3) var(--space-4);
	transition: all 0.2s ease-in-out;
}

	.answer-option label {
		display: flex;
		align-items: center;
		width: 100%;
		cursor: pointer;
	}

	.answer-option input[type="radio"] {
		margin-right: 0.75rem;
		accent-color: var(--color-primary-500);
	}

	.answer-option:not(.correct):not(.incorrect):not(.correct-unselected):hover {
		background-color: var(--color-background-subtle);
		border-color: var(--color-text-secondary);
	}

	.answer-option:not(.correct):not(.incorrect):not(.correct-unselected) span {
		color: var(--color-text-body);
	}

	.answer-option.correct {
		background-color: var(--color-success-100);
		border-color: var(--color-success-500);
		color: var(--color-success-500);
		font-weight: 500;
		display: flex;
	}

	.answer-option.incorrect {
		background-color: var(--color-danger-100);
		border-color: var(--color-danger-300);
		color: var(--color-danger-500);
		font-weight: 500;
		display: flex;
	}

	.answer-option.correct-unselected {
		background-color: var(--color-background-main);
		border-color: var(--color-success-500);
		color: var(--color-success-500);
		font-weight: 500;
		display: flex;
	}

		.answer-option.correct::after,
		.answer-option.correct-unselected::after {
			content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2352C41A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
			line-height: 0;
		}

	.answer-option.incorrect::after {
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF4D4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
		line-height: 0;
	}

.score-progress-bar-container {
	width: 100%;
	background-color: var(--color-background-subtle);
	border-radius: 8px;
	margin-top: 0.75rem;
	overflow: hidden;
}

.score-progress-bar {
	height: 12px;
	background-color: var(--color-primary-500);
	border-radius: 8px;
	transition: width 0.5s ease-in-out;
}

.btn-quiz {
	border-radius: var(--border-radius-base);
	padding: 10px 20px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	border: 2px solid;
	background-color: transparent;
	font-size: 0.9rem;
}

.btn-check-answers {
	border-color: var(--color-primary-300);
	color: var(--color-primary-500);
}

	.btn-check-answers:hover {
		background-color: var(--color-primary-100);
		color: var(--color-primary-600);
	}

	.btn-check-answers:disabled {
		border-color: var(--color-border);
		background-color: var(--color-background-disabled);
		color: var(--color-text-disabled);
		cursor: not-allowed;
	}

.btn-quiz-nav-container {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.btn-quiz-prev {
	border-color: var(--color-border);
	color: var(--color-text-body);
	background-color: var(--color-background-main);
}

	.btn-quiz-prev:hover {
		background-color: var(--color-background-subtle);
	}

.btn-quiz-next {
	border-color: var(--color-danger-500);
	background-color: var(--color-danger-500);
	color: var(--text-color-white);
	display: flex;
	align-items: center;
}

	.btn-quiz-next:hover {
		background-color: var(--color-danger-600);
		border-color: var(--color-danger-600);
	}

	.btn-quiz-next::after {
		content: '→';
		margin-left: 0.5rem;
		font-size: 1.2rem;
		line-height: 1;
	}

.alert {
	padding: 1rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: var(--border-radius-base);
}

.alert-info {
	color: var(--color-text-body);
	background-color: var(--color-background-subtle);
}

.quiz-block p {
	color: var(--color-text-secondary);
	font-style: italic;
	text-align: center;
	padding: 2rem 0;
}

/* ========================================================= */
/* ARTICULOS Y CONTENIDO                  */
/* ========================================================= */

.article-title {
	color: var(--color-text-title) !important;
	font-size: var(--text-xl) !important;
	font-weight: 400 !important;
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-4) !important;
}

.article-title-h1 {
	color: var(--color-text-title) !important;
	font-size: var(--text-2xl) !important;
	font-weight: 500 !important;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-4) !important;
}

.article-paragraph {
	color: var(--color-text-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 300 !important;
	padding-bottom: var(--space-2);
	margin-top: var(--space-2);
	margin-bottom: var(--space-4);
	white-space: pre-line;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.article-image {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--border-radius-base);
	box-shadow: var(--elevation-md);
}

.video-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16/9;
	margin: 1rem 0;
}

	.video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

.video-description {
	font-size: var(--font-size-tiny-base);
	font-style: italic;
	color: var(--color-text-secondary);
	text-align: center;
}

.video-error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-6);
	background: var(--color-surface-error, #fee);
	border: 1px solid var(--color-border-error, #fcc);
	border-radius: var(--radius-md);
	text-align: center;
	min-height: 300px;
}

	.video-error-state .error-icon {
		color: var(--color-error, #c33);
		margin-bottom: var(--spacing-4);
	}

	.video-error-state h4 {
		margin: 0 0 var(--spacing-2) 0;
		color: var(--color-text-primary);
	}

	.video-error-state .error-message {
		color: var(--color-text-secondary);
		margin: 0 0 var(--spacing-4) 0;
		font-size: var(--font-size-sm);
	}

.btn-watch-youtube {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-3) var(--spacing-4);
	background: var(--color-background-main);
	color: var(--color-text-body);
	text-decoration: none;
	border-radius: var(--radius-sm);
	font-weight: 500;
	transition: background 0.2s;
}

	.btn-watch-youtube:hover {
		background: #cc0000;
	}

.video-loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: var(--spacing-6);
}

	.video-loading-state .spinner {
		width: 40px;
		height: 40px;
		border: 3px solid var(--color-border-subtle, #e0e0e0);
		border-top-color: var(--color-primary, #007bff);
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
		margin-bottom: var(--spacing-4);
	}

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

.download-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--color-primary-500);
	color: var(--text-color-white) !important;
	padding: 0.75rem 1.5rem;
	border-radius: var(--border-radius-base);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--font-size-base);
	transition: background-color 0.2s ease-in-out;
	border: none;
}

	.download-button:hover {
		background-color: var(--color-primary-600);
		color: var(--text-color-white) !important;
	}

	.download-button:active {
		background-color: var(--color-primary-700);
		color: var(--text-color-white) !important;
	}

	.download-button:disabled {
		background-color: var(--color-background-disabled);
		color: var(--color-text-disabled) !important;
		cursor: not-allowed;
	}

.image-block-container {
	position: relative;
}

.article-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
}

.image-text-overlay {
	position: relative;
	width: 100%;
	padding: 20px;
	opacity: 1;
	background-color: var(--color-background-main);
	box-shadow: var(--elevation-md);
	border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
	margin-top: -10px;
	z-index: 2;
}

	.image-text-overlay h2 {
		font-size: var(--font-size-bigtitle-base);
		color: var(--color-text-title);
		margin-bottom: var(--space-4);
	}

	.image-text-overlay p {
		font-size: var(--font-size-base);
		color: var(--color-text-body);
		line-height: 1.6;
	}

@media (min-width: 992px) {
	.article-image {
		border-radius: var(--border-radius-base);
	}

	.image-text-overlay {
		position: absolute;
		top: 50%;
		left: 0%;
		transform: translateY(-50%);
		width: 60%;
		opacity: 0.9;
		border-radius: 0rem var(--border-radius-base) var(--border-radius-base) 0rem;
		margin-top: 0;
	}

		.image-text-overlay h2 {
			font-size: var(--text-4xl);
		}

		.image-text-overlay p {
			font-size: var(--font-size-base);
		}
}

/* Login Button Improved */
.btn-login-improved {
	background: linear-gradient(45deg, var(--color-primary-500), var(--color-primary-700));
	color: white;
	border: none;
	padding: 12px 30px;
	font-size: var(--text-lg);
	font-weight: bold;
	border-radius: 50px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	margin-inline: auto;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
}

	.btn-login-improved:hover {
		transform: scale(1.05);
		box-shadow: var(--elevation-md);
	}

.nav-actions-login {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.client-initial {
	font-size: var(--text-4xl);
	font-weight: bold;
	color: var(--color-text-title);
	margin-top: var(--space-6);
	text-align: left;
	line-height: var(--leading-tight);
}
/* Utility: Centered container with padding */
.text-center-padded {
	width: 100%;
	text-align: center;
	padding: var(--space-8) 0;
}
/* Button size variants for Home page */
.btn-home-lg {
	padding: var(--space-4) var(--space-8);
	font-weight: 500;
	font-size: var(--text-xl) !important;
	border-radius: var(--space-8);
}

.btn-home-md {
	padding: var(--space-4) var(--space-6);
	font-weight: 400;
	font-size: var(--text-base) !important;
	border-radius: var(--space-8);
}

/* Responsive adjustments for button variants */
@media (max-width: 992px) {
	.btn-home-lg,
	.btn-home-md {
		white-space: normal; /* Allow text to wrap */
		text-align: center;
		line-height: var(--leading-snug);
		min-height: var(--space-12);
	}

	.btn-home-lg {
		font-size: var(--text-xl) !important;
		padding: var(--space-3) var(--space-6);
	}

	.btn-home-md {
		font-size: var(--text-base) !important;
		padding: var(--space-3) var(--space-5);
	}
}

@media (max-width: 576px) {
	.btn-home-lg {
		font-size: var(--text-lg) !important;
		padding: var(--space-3) var(--space-4);
	}

	.btn-home-md {
		font-size: var(--text-sm) !important;
		padding: var(--space-2) var(--space-4);
	}
}

/* ========================================================= */
/* EFECTO ESQUELETO (SKELETON LOADING) Topic Article   */
/* ========================================================= */
/* inicio- skeleton courses */
.skeleton-formation {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-5) 0;
}

.skeleton-card-curso {
	display: flex;
	flex-direction: row;
	background-color: var(--color-background-main);
	border-radius: var(--border-radius-base);
	overflow: hidden;
	box-shadow: var(--max-shadow-color);
	height: 160px;
	border: 1px solid var(--color-border);
}

.skeleton-card-image {
	width: 250px;
	height: 100%;
	background: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	flex-shrink: 0;
}

.skeleton-card-body {
	flex: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.skeleton-card-title {
	width: 40%;
	height: 28px;
	background: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	margin-bottom: 16px;
	border-radius: var(--border-radius-base);
}

.skeleton-card-description {
	width: 90%;
	height: 16px;
	background: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	margin-bottom: 10px;
	border-radius: var(--border-radius-base);
}

	.skeleton-card-description.short {
		width: 60%;
	}

/* fin- skeleton courses */

/* article skeleton */
.skeleton-article-content {
	animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-title {
	height: 3rem;
	background: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--border-radius-base);
	margin-bottom: var(--space-4);
	width: 60%;
}

.skeleton-paragraph {
	height: 1.2rem;
	background: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--border-radius-base);
	margin-bottom: var(--space-4);
	width: 100%;
}

	.skeleton-paragraph.short {
		width: 75%;
	}

.skeleton-image-content {
	height: 16rem;
	background: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--border-radius-base);
	margin: var(--space-4) 0;
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* Estilo base de la línea de esqueleto */
.skeleton-line, .skeleton-image, .skeleton-input {
	background-color: var(--color-background-disabled);
	border-radius: var(--border-radius-base);
	background-image: linear-gradient( 90deg, var(--color-background-disabled) 0px, color-mix(in srgb, var(--color-background-disabled) 70%, #fff 30%) 50px, var(--color-background-disabled) 100px );
	background-size: 200px 100%;
	background-repeat: no-repeat;
	animation: shimmer 1.5s infinite;
}

/* Contenedores */
.contenido-principal.skeleton-principal {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	background-color: var(--color-background-main) !important;
}

.info-box.skeleton-box {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	background-color: var(--color-background-main);
}

.skeleton-box .skeleton-line {
	margin: 0.5rem 0;
}

/* Líneas de texto */
.skeleton-line {
	height: 1rem;
	line-height: 1rem;
}

.barra-busqueda.skeleton-search {
	display: flex;
}

.full-width {
	width: 95%;
}

.title-width {
	width: 70%;
	height: 1.5rem; /* Más alto para simular H2 */
	margin-bottom: 1.5rem;
}

.half-width {
	width: 50%;
}

.small-width {
	width: 30%;
}

.meta-width {
	height: 0.8rem;
	margin-right: 0;
	display: inline-block;
}

/* Imagen (Aspect Ratio para simular la imagen principal) */
.skeleton-image {
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: var(--border-radius-base);
	margin-bottom: 1rem;
}

/* Input de búsqueda */
.skeleton-input {
	height: 2.5rem;
	width: 100%;
	margin-bottom: var(--space-4);
}

/* Item de la lista */
.skeleton-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

/* ================================================== */
/*                 MICRO-INTERACTIONS                 */
/* ================================================== */



/* --- Button Micro-interactions --- */
.btn-home,
.btn-max,
.btn-piloto,
.btn-admin,
.btn-advice {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

	.btn-home:hover,
	.btn-max:hover,
	.btn-piloto:hover,
	.btn-admin:hover,
	.btn-advice:hover {
		transform: translateY(-2px);
		box-shadow: var(--elevation-md);
	}

	.btn-home:active,
	.btn-max:active,
	.btn-piloto:active,
	.btn-admin:active,
	.btn-advice:active {
		transform: translateY(0);
		box-shadow: var(--elevation-sm);
	}

/* --- Card Hover Effects --- */
.solution-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.solution-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}

/* --- Link Animations --- */
.nav-link {
	position: relative;
	transition: color 0.2s ease;
}

	.nav-link::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 0;
		height: 2px;
		background-color: var(--color-primary-500);
		transition: width 0.3s ease;
	}

	.nav-link:hover::after {
		width: 100%;
	}

/* --- Focus Improvements --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Smooth Scrolling (respects prefers-reduced-motion) --- */
html {
	scroll-behavior: smooth;
}

/* --- Card Grid Hover Stagger Effect --- */
.solution-grid-card > * {
	padding: var(--space-4);
	border-radius: var(--space-4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.solution-grid-card > *:hover {
		transform: translateY(-4px);
		box-shadow: var(--elevation-md);
	}

/* ========================================================= */
/* FORMATION MODULE (Cursos, Glosarios, Artículos)           */
/* ========================================================= */

/* --- Layout General --- */
.curso-detalle-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-4);
	max-width: var(--body-width);
	margin-inline: auto;
	font-size: var(--text-xs);
}

	.curso-detalle-layout p {
		color: var(--color-text-body);
	}

	.curso-detalle-layout h1 {
		color: var(--color-text-title);
	}

/* --- Header --- */
.curso-header {
	max-width: var(--body-width);
	margin-inline: auto;
}

	.curso-header h1 {
		margin: 0;
		font-size: var(--text-xl);
		font-weight: 600;
		color: var(--color-text-title);
	}

.subtitulo, .info-creador {
	color: var(--color-text-title);
}

	.subtitulo h5, .info-creador h5 {
		color: var(--color-text-body);
	}

.seccion {
	margin-bottom: 1rem;
}

	.seccion h2 {
		color: var(--color-text-title);
	}

.link-container {
	text-align: center;
	margin: 2rem 0;
}

/* --- Contenedores (Principal e Info Box) --- */
.contenido-principal {
	order: 2;
	border: 1px solid var(--color-border);
	background-color: var(--color-background-disabled);
	border-radius: var(--border-radius-base);
	height: fit-content;
	padding: var(--space-6);
}

.info-box-topic {
	order: 1;
}

.info-box-article {
	order: 2;
}

.info-box {
	order: 2;
	border: 1px solid var(--color-border);
	background-color: var(--color-background-disabled);
	border-radius: var(--border-radius-base);
	height: fit-content;
	padding: var(--space-6);
}

	.info-box h3 {
		margin: 0rem !important;
	}

	.info-box ul {
		list-style: none;
		padding: 0;
	}

	.info-box li {
		margin-bottom: 0.5rem;
		color: var(--color-text-body);
	}

	.info-box hr {
		margin: 1.5rem 0;
	}

.pagination-topic {
	padding: var(--space-6) 0 !important;
}
/* --- Info Box Header (Mobile Accordion) --- */
.info-box-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	margin-bottom: .5rem;
}

	.info-box-header h3 {
		font-size: var(--text-base);
		color: var(--color-text-title);
	}

	.info-box-header h2 {
		color: var(--color-text-title);
	}

.menu-toggle-icon {
	display: inline-block;
	transition: transform 0.3s ease;
	color: var(--color-text-secondary);
}

	.menu-toggle-icon.expanded {
		transform: rotate(-135deg);
	}

.temario-lista-topic {
	transition: max-height 0.4s ease-in-out, padding 0.2s ease;
}

	.temario-lista-topic p {
		color: var(--color-text-body);
	}

	.temario-lista-topic ul {
		list-style: none;
		padding: 0;
	}

	.temario-lista-topic li {
		margin-bottom: 0.5rem;
		color: var(--color-text-body);
	}
/* --- Temario Lista (Accordion Content) --- */
.temario-lista {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-in-out, padding 0.2s ease;
}

	.temario-lista p {
		color: var(--color-text-body);
	}

	.temario-lista.expanded {
		max-height: 100vh;
	}

	.temario-lista ul {
		list-style: none;
		padding: 0;
	}

	.temario-lista li {
		margin-bottom: 0.5rem;
		color: var(--color-text-body);
	}

.temario-titulo {
	font-weight: 400;
}

.temario-meta {
	display: none;
}


.topic-list-container {
	transition: opacity 0.2s ease-in-out;
	opacity: 1;
}

	.topic-list-container.is-updating {
		opacity: 0.5;
		pointer-events: none;
		cursor: wait;
	}

.header-temas-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.loading-indicator {
	color: var(--color-primary-500);
	font-size: var(--text-sm);
}

/* Contenedor de la grilla */
.topic-grid-container {
	transition: opacity 0.2s ease-in-out;
	opacity: 1;
}

	/* Estado de actualización (Búsqueda/Paginación) */
	.topic-grid-container.is-updating {
		opacity: 0.5;
		pointer-events: none; /* Evita clics mientras carga */
	}

.pagination-container.disabled-pagination {
	pointer-events: none;
	opacity: 0.6;
}
/* --- Links de Artículos y Temas --- */
.article-item-link a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	background-color: var(--color-background-main);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);
	margin-bottom: var(--space-1);
	text-decoration: none;
	color: var(--color-text-body);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.article-item-link:hover {
	border-color: var(--color-primary-300);
	transform: translateY(-2px);
}

.article-item-link a.active {
	background-color: var(--color-primary-100);
	border-color: var(--color-primary-300);
	border-left: 3px solid var(--color-primary-600);
}

.article-item-link a.disabled:hover {
	border-color: var(--color-border);
	transform: none;
}

.article-item-link a.disabled {
	border-color: var(--color-border);
	cursor: not-allowed !important;
	transform: none;
}

.article-item-link.disabled {
	cursor: not-allowed !important;
	opacity: 0.6;
	transform: none;
}

	.article-item-link.disabled .anticon-lock {
		color: var(--color-danger-500);
		margin-left: 8px;
	}

.temario-item-link a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-4) var(--space-6);
	background-color: var(--color-background-main);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);
	margin-bottom: 0.5rem;
	text-decoration: none;
	color: var(--color-text-title);
	transition: all 0.2s ease-in-out;
}

	.temario-item-link a:hover,
	.temario-item-link a.active {
		background-color: var(--color-primary-100);
		border-color: var(--color-primary-300);
		transform: translateY(-2px);
	}
/* --- Status Indicators --- */
.status-circulo {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

	.status-circulo.incompleto {
		background-color: var(--color-background-disabled);
		border: 1px solid var(--color-border);
	}

	.status-circulo.completo {
		background-color: var(--color-success-700);
		border: 1px solid var(--color-success-500);
	}
/* --- Navegación Bottom --- */
.navegacion-articulos-bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.btn-nav-article {
	padding: var(--space-2) var(--space-4);
	color: var(--color-text-body);
	cursor: pointer;
	border-radius: var(--border-radius-base);
	border: 1px solid var(--color-border);
	background-color: var(--color-background-main);
}

	.btn-nav-article:hover {
		background-color: var(--color-primary-100);
	}

	.btn-nav-article:disabled {
		cursor: not-allowed;
		opacity: 1;
		background-color: var(--color-background-disabled);
		color: var(--color-text-disabled);
		border-color: var(--color-border);
	}
/* --- Login Prompt Card --- */
.login-prompt-card {
	border-radius: var(--border-radius-base);
	box-shadow: var(--elevation-md);
	text-align: center;
	padding: var(--space-10) var(--space-8);
	max-width: 100%;
	margin: 0px auto;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-color: var(--color-primary-100);
	border: 1px solid var(--color-border);
}

	.login-prompt-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--elevation-lg);
	}

	.login-prompt-card .icon-container {
		font-size: var(--text-4xl);
		margin-bottom: 1.25rem;
		color: var(--color-primary-500);
	}

	.login-prompt-card h2 {
		font-size: var(--text-4xl);
		font-weight: 600;
		color: var(--color-text-title);
		margin-bottom: var(--space-4);
	}

	.login-prompt-card p {
		font-size: var(--text-lg);
		color: var(--color-text-body);
		line-height: var(--leading-normal);
		margin-bottom: 2rem;
	}

.btn-login-improved {
	background: linear-gradient(45deg, var(--color-primary-500), var(--color-primary-700));
	color: var(--text-color-white);
	border: none;
	padding: 12px 30px;
	font-size: var(--text-lg);
	font-weight: bold;
	border-radius: 50px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	margin-inline: auto;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
}

	.btn-login-improved:hover {
		color: var(--text-color-white);
		transform: scale(1.05);
		box-shadow: var(--elevation-md);
	}

.nav-actions-login {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
/* --- Imagen Principal (Topic) --- */
.imagen-principal {
	width: 100%;
	margin-bottom: 1rem;
	border-radius: var(--border-radius-base);
}

.lista-requisitos {
	padding-left: var(--space-5);
}

	.lista-requisitos li {
		margin-bottom: 0.5rem;
	}
/* --- Responsive Desktop --- */
@media (min-width: 992px) {
	.temario-meta {
		display: flex;
		font-size: var(--text-xs);
		color: var(--color-text-body);
	}

	.curso-detalle-layout {
		padding: var(--space-16) 0rem;
		flex-direction: row;
		gap: var(--space-8);
		align-items: flex-start;
	}

	.contenido-principal {
		order: initial;
		flex: 2;
	}

	.info-box {
		order: initial;
		flex: 1;
		padding: var(--space-6);
		position: sticky;
		top: 20px;
	}

	.info-box-header {
		display: block;
		padding: 0;
		pointer-events: none;
		cursor: default;
		margin-bottom: .5rem;
	}

	.menu-toggle-icon {
		display: none;
	}

	.temario-lista {
		max-height: none;
		overflow: visible;
		padding: 0;
		transition: none;
	}
}
/* ==========================================================================
   8. MEDIA PRINT (Optimización para Impresión)
   ========================================================================== */
@media print {
	.top-nav, .gestormax-footer, .sidebar-wrapper, .btn, .nav-actions, .hamburger-btn, .video-container, .btn-quiz-nav-container {
		display: none !important;
	}

	body, .layout, .site-layout-content, .contenido-principal, .info-box {
		background: white !important;
		color: black !important;
		border: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	.card-curso, .quiz-block {
		break-inside: avoid;
		border: 1px solid #ccc;
		page-break-inside: avoid;
	}

	a {
		text-decoration: underline;
		color: black !important;
	}

		a[href]::after {
			content: " (" attr(href) ")";
			font-size: 0.8em;
		}
}