/* Tipografía y base */
		html {
			/* Evita el “temblor” horizontal al aparecer/desaparecer la scrollbar */
			scrollbar-gutter: stable;
		}

		body {
			font-family: 'Roboto', sans-serif;
			margin: 0;
			padding: 0;
		}

		/* Bloqueo global de scroll para offcanvas/modales */
		html.egx-scroll-locked,
		html.egx-scroll-locked body {
			overflow: hidden !important;
			touch-action: none;
		}

		label {
			user-select: none;
		}

		/* Material Design 3: paleta y elevaciones */
		:root {
			color-scheme: light dark;

			/* Colores base (Light) */
			--md-sys-color-primary: #2E5D90;
			/* Azul BUYWEL (respaldo; brandTheme.js aplica los colores del API) */
			--md-sys-color-on-primary: #FFFFFF;
			--md-sys-color-primary-hover: #244A73;
			/* Azul más oscuro: hover / acentos de marca */
			--md-sys-color-secondary: #6C757D;
			/* Gris neutro: texto y elementos secundarios */
			--md-sys-color-on-secondary: #FFFFFF;
			--md-sys-color-secondary-container: #E9ECEF;
			--md-sys-color-on-secondary-container: #495057;
			--md-sys-color-muted: #6C757D;
			--md-sys-color-background: #E8E8E8;
			--md-sys-color-on-background: #1C1B1F;
			--md-sys-color-surface: #FFFFFF;
			--md-sys-color-on-surface: #1C1B1F;
			--md-sys-color-surface-variant: #EEF1F4;
			--md-sys-color-outline: #C4C7C5;

			/* Contenedores y focus */
			--md-sys-color-primary-container: #D9E2EB;
			--md-sys-color-on-primary-container: #1C1B1F;
			--bs-focus-ring-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);

			/* Elevaciones (Light) */
			--elevation-1: 0 1px 2px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .14);
			--elevation-2: 0 2px 4px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .14);
			--radius-md: 12px;
			--radius-sm: 5px;
			--radius-lg: 16px;

			/* Map a Bootstrap */
			--bs-primary: var(--md-sys-color-primary);
			--bs-secondary: var(--md-sys-color-secondary);
			/* RGB mapeados para utilidades Bootstrap (text/bg/border) */
			--egx-primary-rgb: 46, 93, 144;
			/* #2E5D90 */
			--egx-secondary-rgb: 108, 117, 125;
			/* #6C757D */
			--bs-primary-rgb: var(--egx-primary-rgb);
			--bs-secondary-rgb: var(--egx-secondary-rgb);
			--bs-secondary-color: var(--md-sys-color-muted);
			--bs-secondary-bg: var(--md-sys-color-secondary-container);
			--bs-secondary-bg-subtle: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, var(--md-sys-color-surface) 12%);
			--bs-secondary-border-subtle: color-mix(in srgb, var(--md-sys-color-secondary) 35%, var(--md-sys-color-outline) 65%);
			--bs-secondary-text-emphasis: color-mix(in srgb, var(--md-sys-color-secondary) 75%, var(--md-sys-color-on-surface) 25%);
			--bs-body-bg: var(--md-sys-color-background);
			--bs-body-bg-rgb: 232, 232, 232;
			--bs-body-color: var(--md-sys-color-on-background);
			/* Gris neutro de Bootstrap, igual que el panel */
			--bs-tertiary-bg: #F8F9FA;
			--bs-link-color: var(--md-sys-color-primary);
			--bs-link-hover-color: color-mix(in srgb, var(--md-sys-color-primary) 85%, black 15%);
			--bs-border-color: var(--md-sys-color-outline);
		}

		@media (prefers-color-scheme: dark) {
			:root {
				/* Colores (Dark) */
				--md-sys-color-primary: #4682B4;
				/* afinado para dark */
				--md-sys-color-on-primary: #FFFFFF;
				--md-sys-color-primary-hover: #5A93C2;
				--md-sys-color-secondary: #9CA3AF;
				/* Gris claro: texto y elementos secundarios */
				--md-sys-color-on-secondary: #16181D;
				--md-sys-color-secondary-container: #2A2F38;
				--md-sys-color-on-secondary-container: #D1D5DB;
				--md-sys-color-muted: #9CA3AF;
				--md-sys-color-background: #2B2B2B;
				--md-sys-color-on-background: #EEF0F3;
				--md-sys-color-surface: #3A3A3A;
				--md-sys-color-on-surface: #EEF0F3;
				--md-sys-color-surface-variant: #484848;
				--md-sys-color-outline: #6A6A6A;
				--bs-body-bg: var(--md-sys-color-background);
				--bs-body-bg-rgb: 43, 43, 43;
				--bs-body-color: var(--md-sys-color-on-background);
				--bs-border-color: var(--md-sys-color-outline);
				--bs-tertiary-bg: var(--md-sys-color-surface-variant);

				--md-sys-color-primary-container: #334351;
				--md-sys-color-on-primary-container: #EEF0F3;

				/* Elevaciones (Dark) con sombras más sutiles */
				--elevation-1: 0 1px 1px rgba(0, 0, 0, .45), 0 2px 2px rgba(0, 0, 0, .35);
				--elevation-2: 0 2px 3px rgba(0, 0, 0, .5), 0 6px 6px rgba(0, 0, 0, .4);

				/* Bootstrap mapeo en dark */
				--bs-link-hover-color: color-mix(in srgb, var(--md-sys-color-primary) 85%, white 15%);
				/* RGB mapeados (Dark) */
				--egx-primary-rgb: 70, 130, 180;
				/* #4682B4 */
				--egx-secondary-rgb: 156, 163, 175;
				/* #9CA3AF */
				--bs-primary-rgb: var(--egx-primary-rgb);
				--bs-secondary-rgb: var(--egx-secondary-rgb);
				--bs-secondary-color: var(--md-sys-color-muted);
				--bs-secondary-bg: var(--md-sys-color-secondary-container);
				--bs-secondary-bg-subtle: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, var(--md-sys-color-surface) 12%);
				--bs-secondary-border-subtle: color-mix(in srgb, var(--md-sys-color-secondary) 35%, var(--md-sys-color-outline) 65%);
				--bs-secondary-text-emphasis: color-mix(in srgb, var(--md-sys-color-secondary) 80%, white 20%);
			}
		}

		/* Overrides de tema forzado por atributo (tienen prioridad sobre media queries) */
		:root[data-theme='light'] {
			--md-sys-color-primary: #2E5D90;
			--md-sys-color-on-primary: #FFFFFF;
			--md-sys-color-primary-hover: #244A73;
			--md-sys-color-secondary: #6C757D;
			--md-sys-color-on-secondary: #FFFFFF;
			--md-sys-color-secondary-container: #E9ECEF;
			--md-sys-color-on-secondary-container: #495057;
			--md-sys-color-muted: #6C757D;
			--md-sys-color-background: #E8E8E8;
			--md-sys-color-on-background: #1C1B1F;
			--md-sys-color-surface: #FFFFFF;
			--md-sys-color-on-surface: #1C1B1F;
			--md-sys-color-surface-variant: #EEF1F4;
			--md-sys-color-outline: #C4C7C5;
			--md-sys-color-primary-container: #D9E2EB;
			--md-sys-color-on-primary-container: #1C1B1F;
			--bs-focus-ring-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
			--elevation-1: 0 1px 2px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .14);
			--elevation-2: 0 2px 4px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .14);
			--radius-md: 5px;
			--radius-sm: 5px;
			--radius-lg: 5px;
			--bs-primary: var(--md-sys-color-primary);
			--bs-secondary: var(--md-sys-color-secondary);
			--egx-primary-rgb: 46, 93, 144;
			/* #2E5D90 */
			--egx-secondary-rgb: 108, 117, 125;
			/* #6C757D */
			--bs-primary-rgb: var(--egx-primary-rgb);
			--bs-secondary-rgb: var(--egx-secondary-rgb);
			--bs-secondary-color: var(--md-sys-color-muted);
			--bs-secondary-bg: var(--md-sys-color-secondary-container);
			--bs-secondary-bg-subtle: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, var(--md-sys-color-surface) 12%);
			--bs-secondary-border-subtle: color-mix(in srgb, var(--md-sys-color-secondary) 35%, var(--md-sys-color-outline) 65%);
			--bs-secondary-text-emphasis: color-mix(in srgb, var(--md-sys-color-secondary) 75%, var(--md-sys-color-on-surface) 25%);
			--bs-body-bg: var(--md-sys-color-background);
			--bs-body-bg-rgb: 232, 232, 232;
			--bs-body-color: var(--md-sys-color-on-background);
			--bs-tertiary-bg: #F8F9FA;
			--bs-link-color: var(--md-sys-color-primary);
			--bs-link-hover-color: color-mix(in srgb, var(--md-sys-color-primary) 85%, black 15%);
			--bs-border-color: var(--md-sys-color-outline);
		}

		:root[data-theme='dark'] {
			--md-sys-color-primary: #4682B4;
			--md-sys-color-on-primary: #FFFFFF;
			--md-sys-color-primary-hover: #5A93C2;
			--md-sys-color-secondary: #9CA3AF;
			--md-sys-color-on-secondary: #16181D;
			--md-sys-color-secondary-container: #2A2F38;
			--md-sys-color-on-secondary-container: #D1D5DB;
			--md-sys-color-muted: #9CA3AF;
			--md-sys-color-background: #2B2B2B;
			--md-sys-color-on-background: #EEF0F3;
			--md-sys-color-surface: #3A3A3A;
			--md-sys-color-on-surface: #EEF0F3;
			--md-sys-color-surface-variant: #484848;
			--md-sys-color-outline: #6A6A6A;
			--bs-body-bg: var(--md-sys-color-background);
			--bs-body-bg-rgb: 43, 43, 43;
			--bs-body-color: var(--md-sys-color-on-background);
			--bs-border-color: var(--md-sys-color-outline);
			--bs-tertiary-bg: var(--md-sys-color-surface-variant);
			--md-sys-color-primary-container: #334351;
			--md-sys-color-on-primary-container: #EEF0F3;
			--elevation-1: 0 1px 1px rgba(0, 0, 0, .45), 0 2px 2px rgba(0, 0, 0, .35);
			--elevation-2: 0 2px 3px rgba(0, 0, 0, .5), 0 6px 6px rgba(0, 0, 0, .4);
			--bs-link-hover-color: color-mix(in srgb, var(--md-sys-color-primary) 85%, white 15%);
			--egx-primary-rgb: 70, 130, 180;
			/* #4682B4 */
			--egx-secondary-rgb: 156, 163, 175;
			/* #9CA3AF */
			--bs-primary-rgb: var(--egx-primary-rgb);
			--bs-secondary-rgb: var(--egx-secondary-rgb);
			--bs-secondary-color: var(--md-sys-color-muted);
			--bs-secondary-bg: var(--md-sys-color-secondary-container);
			--bs-secondary-bg-subtle: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, var(--md-sys-color-surface) 12%);
			--bs-secondary-border-subtle: color-mix(in srgb, var(--md-sys-color-secondary) 35%, var(--md-sys-color-outline) 65%);
			--bs-secondary-text-emphasis: color-mix(in srgb, var(--md-sys-color-secondary) 80%, white 20%);
		}

		/* Botón flotante sutil de cambio de tema */
		.theme-toggle {
			position: fixed;
			left: 14px;
			bottom: 14px;
			width: 40px;
			height: 40px;
			border-radius: 9999px;
			border: 1px solid var(--md-sys-color-outline);
			background: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent);
			backdrop-filter: blur(6px);
			box-shadow: var(--elevation-1);
			color: var(--md-sys-color-on-surface);
			display: grid;
			place-items: center;
			cursor: pointer;
			opacity: .78;
			transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease;
			z-index: 9999;
		}

		.theme-toggle:hover {
			opacity: 1;
			transform: translateY(-1px);
			box-shadow: var(--elevation-2);
		}

		.theme-toggle:active {
			transform: translateY(0);
		}

		.theme-toggle:focus-visible {
			outline: 2px solid var(--bs-focus-ring-color);
			outline-offset: 2px;
		}

		/* Componentes con tokens MD + Bootstrap.
		   El anillo de Bootstrap usa el naranja fijo de la marca; aquí el sombreado
		   es la elevación neutra, que cambia sola entre modo claro y oscuro. */
		.btn {
			--bs-btn-border-radius: var(--radius-sm);
			--bs-btn-focus-box-shadow: var(--elevation-2);
			--bs-btn-active-shadow: var(--elevation-1);
			border-radius: var(--radius-sm);
		}

		.btn-primary {
			background-color: var(--md-sys-color-primary);
			border-color: var(--md-sys-color-primary);
			color: var(--md-sys-color-on-primary);
			border-radius: var(--radius-sm);
			box-shadow: var(--elevation-1);
			transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
		}

		/* Ajustes contextuales de Bootstrap para respetar el tema global */
		.bg-light {
			background-color: color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-on-surface) 4%) !important;
		}

		.bg-body-tertiary {
			background-color: color-mix(in srgb, var(--md-sys-color-surface) 94%, var(--md-sys-color-on-surface) 6%) !important;
		}

		.text-body-secondary {
			color: var(--md-sys-color-muted) !important;
		}

		/* Utilidad global: texto primario según paleta del tema */
		.text-primary {
			color: var(--md-sys-color-primary) !important;
		}

		/* Utilidad global: texto secundario (gris apagado) */
		.text-secondary,
		.text-muted {
			color: var(--md-sys-color-muted) !important;
		}

		.btn-primary:hover,
		.btn-primary:focus,
		.btn-primary:focus-visible,
		.btn-primary:active {
			background-color: var(--md-sys-color-secondary);
			border-color: var(--md-sys-color-secondary);
			color: var(--md-sys-color-on-primary);
			box-shadow: var(--elevation-2);
		}

		/* Botón contorneado y estados activos */
		.btn-outline-primary {
			color: var(--md-sys-color-primary);
			border-color: var(--md-sys-color-primary);
			border-radius: var(--radius-sm);
		}

		.btn-outline-primary:hover,
		.btn-outline-primary:focus,
		.btn-outline-primary:focus-visible,
		.btn-outline-primary:active {
			color: var(--md-sys-color-on-primary);
			background-color: var(--md-sys-color-primary);
			border-color: var(--md-sys-color-primary);
			box-shadow: var(--elevation-2);
		}

		/* Botones Secondary (coherentes con tokens y sombras) */
		.btn-secondary {
			background-color: var(--md-sys-color-primary-container);
			border-color: color-mix(in srgb, var(--md-sys-color-primary-container) 85%, var(--md-sys-color-outline) 15%);
			color: var(--md-sys-color-on-primary-container);
			border-radius: var(--radius-sm);
			box-shadow: var(--elevation-1);
			transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
		}

		.btn-secondary:hover,
		.btn-secondary:focus,
		.btn-secondary:focus-visible,
		.btn-secondary:active {
			background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 75%, var(--md-sys-color-primary) 25%);
			border-color: color-mix(in srgb, var(--md-sys-color-primary-container) 70%, var(--md-sys-color-primary) 30%);
			color: var(--md-sys-color-on-primary-container);
			box-shadow: var(--elevation-2);
		}

		/* .btn-outline-secondary {
			color: var(--md-sys-color-on-surface);
			border-color: var(--md-sys-color-outline);
			border-radius: var(--radius-sm);
		}

		.btn-outline-secondary:hover,
		.btn-outline-secondary:focus {
			color: var(--md-sys-color-on-surface);
			background-color: color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-on-surface) 8%);
			border-color: var(--md-sys-color-outline);
			box-shadow: var(--elevation-2);
		} */

		/* Botones Warning: mismo criterio que el panel, con el secundario de la marca. */
		.btn-warning {
			background-color: color-mix(in srgb, var(--md-sys-color-secondary) 90%, var(--md-sys-color-primary) 10%);
			border-color: color-mix(in srgb, var(--md-sys-color-secondary) 85%, var(--md-sys-color-primary) 15%);
			color: var(--md-sys-color-on-primary);
			border-radius: var(--radius-sm);
			box-shadow: var(--elevation-1);
			transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
		}

		.btn-warning:hover,
		.btn-warning:focus,
		.btn-warning:focus-visible,
		.btn-warning:active {
			background-color: color-mix(in srgb, var(--md-sys-color-secondary) 75%, var(--md-sys-color-primary) 25%);
			border-color: color-mix(in srgb, var(--md-sys-color-secondary) 70%, var(--md-sys-color-primary) 30%);
			color: var(--md-sys-color-on-primary);
			box-shadow: var(--elevation-2);
		}

		.btn-outline-warning {
			color: color-mix(in srgb, var(--md-sys-color-secondary) 70%, var(--md-sys-color-primary) 30%);
			border-color: color-mix(in srgb, var(--md-sys-color-secondary) 70%, var(--md-sys-color-primary) 30%);
			border-radius: var(--radius-sm);
		}

		.btn-outline-warning:hover,
		.btn-outline-warning:focus,
		.btn-outline-warning:focus-visible,
		.btn-outline-warning:active {
			color: var(--md-sys-color-on-primary);
			background-color: color-mix(in srgb, var(--md-sys-color-secondary) 85%, var(--md-sys-color-primary) 15%);
			border-color: color-mix(in srgb, var(--md-sys-color-secondary) 85%, var(--md-sys-color-primary) 15%);
			box-shadow: var(--elevation-2);
		}

		/* Alertas semánticas adaptadas al tema */
		.alert {
			border-radius: var(--radius-sm);
			border: 1px solid var(--md-sys-color-outline);
			box-shadow: var(--elevation-1);
		}

		/* Success */
		.alert-success {
			--egx-success: #158000;
			/* tono neutro adaptable */
			background-color: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--egx-success) 12%);
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 85%, var(--egx-success) 15%);
			border-color: color-mix(in srgb, var(--egx-success) 50%, var(--md-sys-color-outline) 50%);
		}

		/* Info */
		.alert-info {
			--egx-info: #0ea5e9;
			/* azul informativo */
			background-color: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--egx-info) 12%);
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 85%, var(--egx-info) 15%);
			border-color: color-mix(in srgb, var(--egx-info) 50%, var(--md-sys-color-outline) 50%);
		}

		.card,
		.dropdown-menu,
		.offcanvas,
		.modal-content {
			background-color: var(--md-sys-color-surface);
			color: var(--md-sys-color-on-surface);
			border-color: var(--md-sys-color-outline);
			border-radius: var(--radius-md);
			box-shadow: var(--elevation-1);
		}

		.navbar,
		.toast {
			background-color: var(--md-sys-color-surface);
			color: var(--md-sys-color-on-surface);
			box-shadow: var(--elevation-1);
		}

		/* Nav activos */
		.nav-pills .nav-link.active,
		.nav-link.active {
			background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black 12%);
			color: var(--md-sys-color-on-primary);
			border-radius: var(--radius-sm);
		}

		/* Badges */
		.badge.bg-primary {
			background-color: var(--md-sys-color-primary) !important;
			color: var(--md-sys-color-on-primary) !important;
		}

		.form-control,
		.form-select,
		.form-check-input {
			background-color: color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-on-surface) 4%);
			color: var(--md-sys-color-on-surface);
			border-color: var(--md-sys-color-outline);
			border-radius: var(--radius-sm);
			transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
		}

		.form-control::placeholder {
			color: var(--md-sys-color-muted);
			opacity: 1;
		}

		.form-control:focus,
		.form-select:focus {
			border-color: var(--md-sys-color-primary);
			box-shadow: 0 0 0 0.025rem var(--md-sys-color-primary), 0 0.2rem 0.45rem rgba(0, 0, 0, .12);
		}

		.form-check-input:focus {
			box-shadow: 0 0 0 0.025rem var(--md-sys-color-primary), 0 0.2rem 0.45rem rgba(0, 0, 0, .12);
			border-color: var(--md-sys-color-primary);
		}

		.form-check-input:checked {
			background-color: var(--md-sys-color-primary);
			border-color: var(--md-sys-color-primary);
		}

		a {
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}

		hr {
			color: var(--md-sys-color-outline);
		}

		/* Selección de texto */
		::selection {
			background: color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
			color: inherit;
		}

		/* ===== Loader global (overlay) ===== */
		#egx-loader.d-none {
			display: none !important;
		}

		#egx-loader {
			position: fixed;
			inset: 0;
			z-index: 1100;
			/* sobre modals (1050) */
			display: grid;
			place-items: center;
		}

		#egx-loader .egx-loader__backdrop {
			position: absolute;
			inset: 0;
			background: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
			backdrop-filter: blur(6px) saturate(1.05);
		}

		#egx-loader .egx-loader__panel {
			position: relative;
			padding: 1.25rem 1.5rem;
			border-radius: var(--radius-md);
			background: var(--md-sys-color-surface);
			color: var(--md-sys-color-on-surface);
			box-shadow: var(--elevation-2);
			border: 1px solid var(--md-sys-color-outline);
			min-width: 240px;
		}

		#egx-loader .egx-loader__title {
			font-weight: 600;
			margin: 0;
		}

		#egx-loader .egx-loader__desc {
			margin: .25rem 0 0;
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 70%, transparent);
			font-size: .95rem;
		}

		/* ===== Sonner (toasts) ===== */
		[data-sonner-toaster] {
			z-index: 1150;
		}

		[data-sonner-toaster] [data-icon] {
			display: none !important;
		}

		.egx-sonner-description,
		[data-sonner-toaster] [data-description] {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: min(88vw, 300px);
		}

		/* ===== Páginas Legales ===== */
		.legal-header {
			background: var(--md-sys-color-primary-container);
			border-bottom: 3px solid var(--md-sys-color-primary);
			padding: 3rem 0 2rem;
		}

		.legal-header h1 {
			color: var(--md-sys-color-on-primary-container);
			font-weight: 700;
		}

		.badge-legal {
			background-color: var(--md-sys-color-primary);
			color: var(--md-sys-color-on-primary);
			font-size: 0.78rem;
			font-weight: 500;
			padding: 0.35em 0.75em;
			border-radius: 999px;
			display: inline-block;
		}

		.legal-body {
			max-width: 820px;
			margin: 0 auto;
		}

		.legal-section {
			border-left: 4px solid var(--md-sys-color-primary);
			padding-left: 1.25rem;
			margin-bottom: 2.5rem;
		}

		.legal-section h2 {
			font-size: 1.15rem;
			font-weight: 700;
			color: var(--md-sys-color-on-surface);
			margin-bottom: 0.75rem;
		}

		.legal-section p,
		.legal-section li {
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 80%, transparent);
			line-height: 1.75;
			font-size: 0.97rem;
		}

		.legal-section ul {
			padding-left: 1.25rem;
		}

		.highlight-box {
			background: var(--md-sys-color-primary-container);
			border-radius: var(--radius-md);
			padding: 1rem 1.25rem;
			margin-top: 0.75rem;
		}

		.highlight-box p {
			margin: 0;
			color: var(--md-sys-color-on-primary-container) !important;
			font-weight: 500;
		}

		.divider-legal {
			border-color: var(--md-sys-color-outline);
			opacity: 0.4;
		}

		/* Tarjeta WhatsApp (eliminación de datos) */
		.contact-card {
			background: var(--md-sys-color-surface);
			border: 2px solid var(--md-sys-color-primary);
			border-radius: var(--radius-lg);
			padding: 2rem;
			text-align: center;
			box-shadow: var(--elevation-2);
		}

		.contact-card .whatsapp-icon {
			font-size: 3rem;
			color: #25D366;
			display: block;
			margin-bottom: 0.75rem;
		}

		.contact-card h3 {
			font-weight: 700;
			color: var(--md-sys-color-on-surface);
			font-size: 1.25rem;
			margin-bottom: 0.5rem;
		}

		.contact-card p {
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 70%, transparent);
			font-size: 0.95rem;
			margin-bottom: 1.25rem;
		}

		.btn-whatsapp {
			background-color: #25D366;
			color: #fff;
			border: none;
			border-radius: 999px;
			padding: 0.65rem 1.75rem;
			font-size: 1rem;
			font-weight: 600;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			transition: background-color 0.2s, transform 0.15s;
		}

		.btn-whatsapp:hover {
			background-color: #1ebe5d;
			color: #fff;
			text-decoration: none;
			transform: scale(1.03);
		}

		/* Lista de pasos numerados */
		.steps-list {
			counter-reset: step-counter;
			list-style: none;
			padding-left: 0;
		}

		.steps-list li {
			counter-increment: step-counter;
			display: flex;
			align-items: flex-start;
			gap: 1rem;
			margin-bottom: 1.1rem;
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 80%, transparent);
			font-size: 0.97rem;
			line-height: 1.65;
		}

		.steps-list li::before {
			content: counter(step-counter);
			background: var(--md-sys-color-primary);
			color: var(--md-sys-color-on-primary);
			font-weight: 700;
			font-size: 0.82rem;
			border-radius: 50%;
			min-width: 1.75rem;
			height: 1.75rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			margin-top: 0.1rem;
		}