/* Tipografía y base */
		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: #F15A24;
			/* Naranja EnduroGearX */
			--md-sys-color-on-primary: #FFFFFF;
			--md-sys-color-secondary: #D94E1E;
			--md-sys-color-background: #FFFFFF;
			--md-sys-color-on-background: #1C1B1F;
			--md-sys-color-surface: #FFFFFF;
			--md-sys-color-on-surface: #1C1B1F;
			--md-sys-color-surface-variant: #F4E7E3;
			--md-sys-color-outline: #C4C7C5;

			/* Contenedores y focus */
			--md-sys-color-primary-container: #FFE4D6;
			--md-sys-color-on-primary-container: #2B0D00;
			--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: 241, 90, 36;
			/* #F15A24 */
			--egx-secondary-rgb: 217, 78, 30;
			/* #D94E1E */
			--bs-primary-rgb: var(--egx-primary-rgb);
			--bs-secondary-rgb: var(--egx-secondary-rgb);
			--bs-body-bg: var(--md-sys-color-background);
			--bs-body-color: var(--md-sys-color-on-background);
			--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: #FF8A50;
				/* afinado para dark */
				--md-sys-color-on-primary: #3B1F12;
				--md-sys-color-secondary: #FF6E40;
				/* Grafito suave en lugar de negro puro */
				--md-sys-color-background: #16181D;
				/* fondo principal */
				--md-sys-color-on-background: #E5E7EB;
				/* texto sobre fondo */
				--md-sys-color-surface: #1C2027;
				/* superficies (cards/navbars) */
				--md-sys-color-on-surface: #E5E7EB;
				/* texto en superficies */
				--md-sys-color-surface-variant: #262B33;
				/* variante para inputs y zonas secundarias */
				--md-sys-color-outline: #343A40;
				/* bordes suaves */

				--md-sys-color-primary-container: #3B1F12;
				--md-sys-color-on-primary-container: #FFDBCC;

				/* 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: 255, 138, 80;
				/* #FF8A50 */
				--egx-secondary-rgb: 255, 110, 64;
				/* #FF6E40 */
				--bs-primary-rgb: var(--egx-primary-rgb);
				--bs-secondary-rgb: var(--egx-secondary-rgb);
			}
		}

		/* Overrides de tema forzado por atributo (tienen prioridad sobre media queries) */
		:root[data-theme='light'] {
			--md-sys-color-primary: #F15A24;
			--md-sys-color-on-primary: #FFFFFF;
			--md-sys-color-secondary: #D94E1E;
			--md-sys-color-background: #FFFFFF;
			--md-sys-color-on-background: #1C1B1F;
			--md-sys-color-surface: #FFFFFF;
			--md-sys-color-on-surface: #1C1B1F;
			--md-sys-color-surface-variant: #F4E7E3;
			--md-sys-color-outline: #C4C7C5;
			--md-sys-color-primary-container: #FFE4D6;
			--md-sys-color-on-primary-container: #2B0D00;
			--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: 241, 90, 36;
			/* #F15A24 */
			--egx-secondary-rgb: 217, 78, 30;
			/* #D94E1E */
			--bs-primary-rgb: var(--egx-primary-rgb);
			--bs-secondary-rgb: var(--egx-secondary-rgb);
			--bs-body-bg: var(--md-sys-color-background);
			--bs-body-color: var(--md-sys-color-on-background);
			--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: #FF8A50;
			--md-sys-color-on-primary: #3B1F12;
			--md-sys-color-secondary: #FF6E40;
			/* Grafito suave en lugar de negro puro */
			--md-sys-color-background: #16181D;
			--md-sys-color-on-background: #E5E7EB;
			--md-sys-color-surface: #1C2027;
			--md-sys-color-on-surface: #E5E7EB;
			--md-sys-color-surface-variant: #262B33;
			--md-sys-color-outline: #343A40;
			--md-sys-color-primary-container: #3B1F12;
			--md-sys-color-on-primary-container: #FFDBCC;
			--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: 255, 138, 80;
			/* #FF8A50 */
			--egx-secondary-rgb: 255, 110, 64;
			/* #FF6E40 */
			--bs-primary-rgb: var(--egx-primary-rgb);
			--bs-secondary-rgb: var(--egx-secondary-rgb);
		}

		/* 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 */
		.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: color-mix(in srgb, var(--md-sys-color-on-surface) 60%, transparent) !important;
		}

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

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

		.btn-primary:hover,
		.btn-primary:focus {
			background-color: var(--md-sys-color-secondary);
			border-color: var(--md-sys-color-secondary);
			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 {
			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 {
			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%);
			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 (usa la paleta de marca para coherencia en ambos temas) */
		.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 {
			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%);
			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 {
			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: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
			opacity: 1;
		}

		.form-control:focus,
		.form-select:focus {
			border-color: var(--md-sys-color-primary);
			box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
		}

		.form-check-input:focus {
			box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
			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;
		}

		/* ===== Notificaciones globales (toasts) ===== */
		#egx-notify-root {
			position: fixed;
			z-index: 1150;
			/* por encima del loader */
			display: flex;
			flex-direction: column;
			gap: 10px;
			pointer-events: none;
			/* elementos internos sí reciben eventos */
		}

		/* Posiciones */
		#egx-notify-root[data-position="top-right"] {
			top: 14px;
			right: 14px;
			align-items: flex-end;
		}

		#egx-notify-root[data-position="top-left"] {
			top: 14px;
			left: 14px;
			align-items: flex-start;
		}

		#egx-notify-root[data-position="bottom-right"] {
			bottom: 14px;
			right: 14px;
			align-items: flex-end;
		}

		#egx-notify-root[data-position="bottom-left"] {
			bottom: 14px;
			left: 14px;
			align-items: flex-start;
		}

		#egx-notify-root[data-position="top-center"] {
			top: 14px;
			left: 50%;
			transform: translateX(-50%);
			align-items: center;
		}

		#egx-notify-root[data-position="bottom-center"] {
			bottom: 14px;
			left: 50%;
			transform: translateX(-50%);
			align-items: center;
		}

		#egx-notify-root[data-position^="bottom"] {
			flex-direction: column-reverse;
		}

		/* Tarjeta base */
		.egx-notify {
			pointer-events: auto;
			min-width: 280px;
			max-width: min(92vw, 420px);
			background: var(--md-sys-color-surface);
			color: var(--md-sys-color-on-surface);
			border: 1px solid var(--md-sys-color-outline);
			border-left-width: 4px;
			border-left-color: var(--egx-accent, var(--md-sys-color-primary));
			border-radius: var(--radius-md);
			box-shadow: var(--elevation-2);
			padding: .6rem .75rem;
			display: grid;
			grid-template-columns: 22px 1fr auto;
			gap: .6rem .75rem;
			position: relative;
			overflow: hidden;
			opacity: 0;
			transform: translateY(-8px);
			transition: opacity .18s ease, transform .18s ease;
		}

		#egx-notify-root[data-position^="bottom"] .egx-notify {
			transform: translateY(8px);
		}

		.egx-notify.egx-show {
			opacity: 1;
			transform: translateY(0);
		}

		.egx-notify__icon {
			line-height: 1;
			color: var(--egx-accent, var(--md-sys-color-primary));
			display: grid;
			place-items: center;
		}

		.egx-notify__title {
			margin: 0;
			font-weight: 600;
			font-size: .98rem;
		}

		.egx-notify__message {
			margin: 0;
			color: color-mix(in srgb, var(--md-sys-color-on-surface) 75%, transparent);
			font-size: .95rem;
		}

		.egx-notify__close {
			align-self: start;
			background: transparent;
			border: 0;
			color: inherit;
			opacity: .65;
			cursor: pointer;
			padding: 2px;
			border-radius: 6px;
		}

		.egx-notify__close:hover {
			opacity: 1;
		}

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

		/* Barra de progreso */
		.egx-notify__progress {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 2px;
			background: color-mix(in srgb, var(--egx-accent, var(--md-sys-color-primary)) 85%, transparent);
			width: 100%;
			transition: width linear;
		}

		/* Variantes (usa vars de Bootstrap con fallback) */
		.egx-notify--success {
			--egx-accent: var(--bs-success, #198754);
		}

		.egx-notify--info {
			--egx-accent: var(--bs-info, #0dcaf0);
		}

		.egx-notify--warning {
			--egx-accent: var(--bs-warning, #ffc107);
		}

		.egx-notify--danger,
		.egx-notify--error {
			--egx-accent: var(--bs-danger, #dc3545);
		}

		.egx-notify--primary {
			--egx-accent: var(--bs-primary, var(--md-sys-color-primary));
		}