@import url("Poppins/poppins.css");

:root {
	--tblr-body-font-family: "Poppins", sans-serif;
	--bs-body-bg: var(--color-white);

	--ooh-black-color: var(--color-noir);
	--ooh-main-color: #265ff1;
	--ooh-main-color-op01: #265ff11a;
	--filter-svg-black2white: invert(100%) sepia(100%) saturate(0%)
		hue-rotate(3deg) brightness(100%) contrast(104%);
	--filter-svg-black2gold: invert(69%) sepia(15%) saturate(775%)
		hue-rotate(3deg) brightness(94%) contrast(85%);
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
	 TABLER COLOR OVERRIDES - FIGMA SOLID TOKENS
	 --------------------------------------------------------------------------
	 Objetivo:
	 - Mantener Tabler intacto.
	 - Usar los colores de Figma como fuente de verdad.
	 - Evitar fondos calculados con transparencia, rgba() o color-mix(... transparent).
	 - Sustituir variantes "lt", "subtle", alerts, badges, botones y fondos
	 por colores sólidos predefinidos.
	 ========================================================================== */

:root,
[data-bs-theme="light"] {
	/* --------------------------------------------------------------------------
	 PRIMARY
	 -------------------------------------------------------------------------- */
	--color-primary: #345fea;
	--color-primary-rgb: 52, 95, 234;

	--color-primary-l-100: #e6ecfd;
	--color-primary-l-200: #cddafb;
	--color-primary-l-300: #b4c8fa;
	--color-primary-l-400: #9bb5f8;
	--color-primary-l-500: #83a3f7;
	--color-primary-l-600: #6a91f5;
	--color-primary-l-700: #517ef3;
	--color-primary-l-800: #386cf2;
	--color-primary-l-900: #1f5af0;

	--color-primary-d-100: #0640d7;
	--color-primary-d-200: #0539bf;
	--color-primary-d-300: #0432a7;
	--color-primary-d-400: #042b8f;
	--color-primary-d-500: #032477;
	--color-primary-d-600: #021c5f;
	--color-primary-d-700: #021547;
	--color-primary-d-800: #010e2f;

	/* --------------------------------------------------------------------------
	 SECONDARY
	 -------------------------------------------------------------------------- */
	--color-secondary: #df2d71;
	--color-secondary-rgb: 223, 45, 113;

	--color-secondary-l-100: #fbe8f0;
	--color-secondary-l-200: #f8d2e1;
	--color-secondary-l-300: #f4bcd3;
	--color-secondary-l-400: #f1a5c5;
	--color-secondary-l-500: #ed90b7;
	--color-secondary-l-600: #eb7aa8;
	--color-secondary-l-700: #e7649a;
	--color-secondary-l-800: #e5508c;
	--color-secondary-l-900: #e23c7f;

	--color-secondary-d-100: #c92865;
	--color-secondary-d-200: #b3235a;
	--color-secondary-d-300: #9c1e4e;
	--color-secondary-d-400: #861943;
	--color-secondary-d-500: #701539;
	--color-secondary-d-600: #59102d;
	--color-secondary-d-700: #430c22;
	--color-secondary-d-800: #2d0716;

	/* --------------------------------------------------------------------------
	 YELLOW / WARNING
	 -------------------------------------------------------------------------- */
	--color-yellow: #f0a133;
	--color-yellow-rgb: 240, 161, 51;

	--color-yellow-l-100: #fdf5e6;
	--color-yellow-l-200: #fbe8c2;
	--color-yellow-l-300: #f9dca0;
	--color-yellow-l-400: #f7cf7c;
	--color-yellow-l-500: #f5c35a;

	--color-yellow-d-100: #d78c19;
	--color-yellow-d-200: #b97708;
	--color-yellow-d-300: #996300;
	--color-yellow-d-400: #754b00;
	--color-yellow-d-500: #573800;

	/* --------------------------------------------------------------------------
	 ORANGE
	 -------------------------------------------------------------------------- */
	--color-orange: #f16c29;
	--color-orange-rgb: 241, 108, 41;

	--color-orange-l-100: #fdf0e7;
	--color-orange-l-200: #fad8c4;
	--color-orange-l-300: #f8c09f;
	--color-orange-l-400: #f5a77b;
	--color-orange-l-500: #f38d56;

	--color-orange-d-100: #d85712;
	--color-orange-d-200: #b94605;
	--color-orange-d-300: #973700;
	--color-orange-d-400: #742a00;
	--color-orange-d-500: #551f00;

	/* --------------------------------------------------------------------------
	 TEAL / SUCCESS
	 -------------------------------------------------------------------------- */
	--color-teal: #2da47b;
	--color-teal-rgb: 45, 164, 123;

	--color-teal-l-100: #e8f6f1;
	--color-teal-l-200: #c7ebe0;
	--color-teal-l-300: #a2ddcb;
	--color-teal-l-400: #7bcfb6;
	--color-teal-l-500: #55bfa0;

	--color-teal-d-100: #228865;
	--color-teal-d-200: #18714f;
	--color-teal-d-300: #0f5b3f;
	--color-teal-d-400: #084631;
	--color-teal-d-500: #033323;

	/* --------------------------------------------------------------------------
	 GREY / DARK
	 -------------------------------------------------------------------------- */
	--color-soft-grey: #e8e8e8;
	--color-soft-grey-rgb: 232, 232, 232;
	--color-light-grey: #f3f3f3;
	--color-soft-grey-rgb: 243, 243, 243;
	--bg-color-grey-10: rgba(107, 114, 128, 0.10);

	--color-grey: #c5c5c5;
	--color-med-grey: #8b8b8b;
	--color-dark-grey: #515151;
	--color-noir: #171717;

	--color-navbar: var(--color-noir);
	--tblr-nav-link-color: var(--color-noir);

	--color-white: #ffffff;

	/* --------------------------------------------------------------------------
	 TYPOGRAPHY TOKENS (FIGMA)
	 -------------------------------------------------------------------------- */
	--type-headline-large-size: 2rem; /* 32 */
	--type-headline-large-line-height: 1.25; /* 40/32 */
	--type-headline-medium-size: 1.75rem; /* 28 */
	--type-headline-medium-line-height: 1.2857142857; /* 36/28 */
	--type-headline-small-size: 1.5rem; /* 24 */
	--type-headline-small-line-height: 1.3333333333; /* 32/24 */

	--type-title-large-size: 1.125rem; /* 18 */
	--type-title-large-line-height: 1.5555555556; /* 28/18 */
	--type-title-medium-size: 1rem; /* 16 */
	--type-title-medium-line-height: 1.5; /* 24/16 */
	--type-title-small-size: 0.875rem; /* 14 */
	--type-title-small-line-height: 1.4285714286; /* 20/14 */

	--type-body-large-size: 1rem; /* 16 */
	--type-body-large-line-height: 1.5; /* 24/16 */
	--type-body-medium-size: 0.875rem; /* 14 */
	--type-body-medium-line-height: 1.4285714286; /* 20/14 */
	--type-body-small-size: 0.75rem; /* 12 */
	--type-body-small-line-height: 1.6666666667; /* 20/12 */

	--type-label-large-size: 1rem; /* 16 */
	--type-label-large-line-height: 1.25; /* 20/16 */
	--type-label-medium-size: 0.875rem; /* 14 */
	--type-label-medium-line-height: 1.4285714286; /* 20/14 */
	--type-label-small-size: 0.75rem; /* 12 */
	--type-label-small-line-height: 1.3333333333; /* 16/12 */

	/* --------------------------------------------------------------------------
	 TABLER CORE MAPPING
	 -------------------------------------------------------------------------- */

	--tblr-primary: var(--color-primary);
	--tblr-primary-rgb: var(--color-primary-rgb);
	--tblr-primary-fg: var(--color-white);
	--tblr-primary-darken: var(--color-primary-d-100);
	--tblr-primary-lt: var(--color-primary-l-100);
	--tblr-primary-200: var(--color-primary-l-200);
	--tblr-primary-300: var(--color-primary-l-300);
	--tblr-primary-400: var(--color-primary-l-400);
	--tblr-primary-500: var(--color-primary);
	--tblr-primary-600: var(--color-primary-d-100);
	--tblr-primary-700: var(--color-primary-d-200);
	--tblr-primary-800: var(--color-primary-d-300);
	--tblr-primary-900: var(--color-primary-d-400);

	/* --tblr-secondary: var(--color-secondary);
	--tblr-secondary-rgb: var(--color-secondary-rgb);
	--tblr-secondary-fg: var(--color-white);
	--tblr-secondary-darken: var(--color-secondary-d-100);
	--tblr-secondary-lt: var(--color-secondary-l-100);
	--tblr-secondary-200: var(--color-secondary-l-200);
	--tblr-secondary-300: var(--color-secondary-l-300);
	--tblr-secondary-400: var(--color-secondary-l-400);
	--tblr-secondary-500: var(--color-secondary);
	--tblr-secondary-600: var(--color-secondary-d-100);
	--tblr-secondary-700: var(--color-secondary-d-200);
	--tblr-secondary-800: var(--color-secondary-d-300);
	--tblr-secondary-900: var(--color-secondary-d-400); */

	--tblr-warning: var(--color-yellow);
	--tblr-warning-rgb: var(--color-yellow-rgb);
	--tblr-warning-fg: var(--color-white);
	--tblr-warning-darken: var(--color-yellow-d-100);
	--tblr-warning-lt: var(--color-yellow-l-100);
	--tblr-warning-200: var(--color-yellow-l-200);
	--tblr-warning-300: var(--color-yellow-l-300);
	--tblr-warning-400: var(--color-yellow-l-400);
	--tblr-warning-500: var(--color-yellow);
	--tblr-warning-600: var(--color-yellow-d-100);
	--tblr-warning-700: var(--color-yellow-d-200);
	--tblr-warning-800: var(--color-yellow-d-300);
	--tblr-warning-900: var(--color-yellow-d-400);

	--tblr-orange: var(--color-orange);
	--tblr-orange-rgb: var(--color-orange-rgb);
	--tblr-orange-fg: var(--color-white);
	--tblr-orange-darken: var(--color-orange-d-100);
	--tblr-orange-lt: var(--color-orange-l-100);
	--tblr-orange-200: var(--color-orange-l-200);
	--tblr-orange-300: var(--color-orange-l-300);
	--tblr-orange-400: var(--color-orange-l-400);
	--tblr-orange-500: var(--color-orange);
	--tblr-orange-600: var(--color-orange-d-100);
	--tblr-orange-700: var(--color-orange-d-200);
	--tblr-orange-800: var(--color-orange-d-300);
	--tblr-orange-900: var(--color-orange-d-400);

	--tblr-success: var(--color-teal);
	--tblr-success-rgb: var(--color-teal-rgb);
	--tblr-success-fg: var(--color-white);
	--tblr-success-darken: var(--color-teal-d-100);
	--tblr-success-lt: var(--color-teal-l-100);
	--tblr-success-200: var(--color-teal-l-200);
	--tblr-success-300: var(--color-teal-l-300);
	--tblr-success-400: var(--color-teal-l-400);
	--tblr-success-500: var(--color-teal);
	--tblr-success-600: var(--color-teal-d-100);
	--tblr-success-700: var(--color-teal-d-200);
	--tblr-success-800: var(--color-teal-d-300);
	--tblr-success-900: var(--color-teal-d-400);

	/* --------------------------------------------------------------------------
	 TABLER COLOR ALIASES
	 -------------------------------------------------------------------------- */

	--tblr-blue: var(--color-primary);
	--tblr-blue-rgb: var(--color-primary-rgb);
	--tblr-blue-fg: var(--color-white);
	--tblr-blue-darken: var(--color-primary-d-100);
	--tblr-blue-lt: var(--color-primary-l-100);
	--bg-blue-lt: var(--color-primary-l-100);

	--tblr-info: var(--color-primary);
	--tblr-info-rgb: var(--color-primary-rgb);
	--tblr-info-fg: var(--color-white);
	--tblr-info-darken: var(--color-primary-d-100);
	--tblr-info-lt: var(--color-primary-l-100);

	--tblr-red: var(--color-secondary);
	--tblr-red-rgb: var(--color-secondary-rgb);
	--tblr-red-fg: var(--color-white);
	--tblr-red-darken: var(--color-secondary-d-100);
	--tblr-red-lt: var(--color-secondary-l-100);
	--bg-red-lt: var(--color-secondary-l-100);

	--tblr-pink: var(--color-secondary);
	--tblr-pink-rgb: var(--color-secondary-rgb);
	--tblr-pink-fg: var(--color-white);
	--tblr-pink-darken: var(--color-secondary-d-100);
	--tblr-pink-lt: var(--color-secondary-l-100);

	--tblr-yellow: var(--color-yellow);
	--tblr-yellow-rgb: var(--color-yellow-rgb);
	--tblr-yellow-fg: var(--color-white);
	--tblr-yellow-darken: var(--color-yellow-d-100);
	--tblr-yellow-lt: var(--color-yellow-l-100);
	--bg-yellow-lt: var(--color-yellow-l-100);

	--tblr-green: var(--color-teal);
	--tblr-green-rgb: var(--color-teal-rgb);
	--tblr-green-fg: var(--color-white);
	--tblr-green-darken: var(--color-teal-d-100);
	--tblr-green-lt: var(--color-teal-l-100);
	--bg-green-lt: var(--color-teal-l-100);

	--tblr-teal: var(--color-teal);
	--tblr-teal-rgb: var(--color-teal-rgb);
	--tblr-teal-fg: var(--color-white);
	--tblr-teal-darken: var(--color-teal-d-100);
	--tblr-teal-lt: var(--color-teal-l-100);
	--bg-teal-lt: var(--color-teal-l-100);

	--tblr-lime: var(--color-teal);
	--tblr-lime-rgb: var(--color-teal-rgb);
	--tblr-lime-fg: var(--color-white);
	--tblr-lime-darken: var(--color-teal-d-100);
	--tblr-lime-lt: var(--color-teal-l-100);
	--bg-lime-lt: var(--color-teal-l-100);

	/* --------------------------------------------------------------------------
	 BOOTSTRAP/TABLER SUBTLE TOKENS - SIN OPACIDAD
	 -------------------------------------------------------------------------- */

	--tblr-primary-bg-subtle: var(--color-primary-l-100);
	--tblr-primary-border-subtle: var(--color-primary-l-300);
	--tblr-primary-text-emphasis: var(--color-primary-d-300);

	--tblr-secondary-bg-subtle: var(--color-secondary-l-100);
	--tblr-secondary-border-subtle: var(--color-secondary-l-300);
	--tblr-secondary-text-emphasis: var(--color-secondary-d-300);

	--tblr-info-bg-subtle: var(--color-primary-l-100);
	--tblr-info-border-subtle: var(--color-primary-l-300);
	--tblr-info-text-emphasis: var(--color-primary-d-300);

	--tblr-warning-bg-subtle: var(--color-yellow-l-100);
	--tblr-warning-border-subtle: var(--color-yellow-l-300);
	--tblr-warning-text-emphasis: var(--color-yellow-d-300);

	--tblr-success-bg-subtle: var(--color-teal-l-100);
	--tblr-success-border-subtle: var(--color-teal-l-300);
	--tblr-success-text-emphasis: var(--color-teal-d-300);

	--tblr-danger: var(--color-secondary);
	--tblr-danger-rgb: var(--color-secondary-rgb);
	--tblr-danger-bg-subtle: var(--color-secondary-l-100);
	--tblr-danger-border-subtle: var(--color-secondary-l-300);
	--tblr-danger-text-emphasis: var(--color-secondary-d-300);

	/* --------------------------------------------------------------------------
	 LINKS / FOCUS / BORDERS - SIN TRANSPARENCIAS VARIABLES
	 -------------------------------------------------------------------------- */

	--tblr-link-color: var(--color-primary);
	--tblr-link-color-rgb: var(--color-primary-rgb);
	--tblr-link-hover-color: var(--color-primary-d-100);
	--tblr-link-hover-color-rgb: 6, 64, 215;

	--tblr-focus-ring-opacity: 1;
	--tblr-focus-ring-color: var(--color-primary-l-300);

	--tblr-border-color-translucent: var(--color-soft-grey);
	--tblr-bg-surface-secondary: var(--color-light-grey);
	--tblr-bg-surface-tertiary: var(--color-light-grey);
}

/* ==========================================================================
	 SOLID BACKGROUND UTILITIES
	 ========================================================================== */

.bg-primary,
.text-bg-primary {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

.bg-secondary,
.text-bg-secondary {
	background-color: var(--color-secondary) !important;
	color: var(--color-white) !important;
}

.bg-warning,
.text-bg-warning,
.bg-yellow,
.text-bg-yellow {
	background-color: var(--color-yellow) !important;
	color: var(--color-white) !important;
}

.bg-orange,
.text-bg-orange {
	background-color: var(--color-orange) !important;
	color: var(--color-white) !important;
}

.bg-success,
.text-bg-success,
.bg-teal,
.text-bg-teal,
.bg-green,
.text-bg-green,
.bg-lime,
.text-bg-lime {
	background-color: var(--color-teal) !important;
	color: var(--color-white) !important;
}

/* ==========================================================================
	 SOLID LIGHT BACKGROUND UTILITIES
	 ========================================================================== */

.bg-primary-lt,
.text-bg-primary-lt,
.badge.bg-primary-lt,
.badge.text-bg-primary-lt {
	background-color: var(--color-primary-l-100) !important;
	/* border-color: var(--color-primary-l-300) !important; */
	color: var(--color-primary) !important;
}

.bg-secondary-lt,
.bg-red-lt,
.bg-pink-lt,
.text-bg-secondary-lt,
.text-bg-red-lt,
.text-bg-pink-lt,
.badge.bg-secondary-lt,
.badge.bg-red-lt,
.badge.bg-pink-lt,
.badge.text-bg-red-lt,
.badge.text-bg-secondary-lt,
.badge.text-bg-pink-lt {
	background-color: var(--color-secondary-l-100) !important;
	/* border-color: var(--color-secondary-l-300) !important; */
	color: var(--color-secondary) !important;
}

.bg-warning-lt,
.bg-yellow-lt,
.text-bg-warning-lt,
.text-bg-yellow-lt,
.badge.bg-warning-lt,
.badge.bg-yellow-lt,
.badge.text-bg-warning-lt,
.badge.text-bg-yellow-lt {
	background-color: var(--color-yellow-l-100) !important;
	/* border-color: var(--color-yellow-l-300) !important; */
	color: var(--color-yellow-d-300) !important;
}

.bg-orange-lt,
.text-bg-orange-lt,
.badge.bg-orange-lt,
.badge.text-bg-orange-lt {
	background-color: var(--color-orange-l-100) !important;
	/* border-color: var(--color-orange-l-300) !important; */
	color: var(--color-orange) !important;
}

.bg-success-lt,
.bg-teal-lt,
.bg-green-lt,
.bg-lime-lt,
.text-bg-success-lt,
.text-bg-teal-lt,
.text-bg-green-lt,
.text-bg-lime-lt,
.badge.bg-success-lt,
.badge.bg-teal-lt,
.badge.bg-green-lt,
.badge.bg-lime-lt,
.badge.text-bg-success-lt,
.badge.text-bg-teal-lt,
.badge.text-bg-green-lt,
.badge.text-bg-lime-lt {
	background-color: var(--color-teal-l-100) !important;
	/* border-color: var(--color-teal-l-300) !important; */
	color: var(--color-teal) !important;
}

/* ==========================================================================
	 ALERTS - FONDOS SÓLIDOS SIN RGBA/COLOR-MIX
	 ========================================================================== */

.alert-primary,
.alert-info,
.alert-blue {
	--tblr-alert-color: var(--color-primary-d-300);
	color: var(--color-primary-d-300) !important;
	background-color: var(--color-primary-l-100) !important;
	border-color: var(--color-primary) !important;
}

.alert-secondary,
.alert-danger,
.alert-red,
.alert-pink {
	--tblr-alert-color: var(--color-secondary-d-300);
	color: var(--color-secondary-d-300) !important;
	background-color: var(--color-secondary-l-100) !important;
	border-color: var(--color-secondary) !important;
}

.alert-warning,
.alert-yellow {
	--tblr-alert-color: var(--color-yellow-d-300);
	color: var(--color-yellow-d-300) !important;
	background-color: var(--color-yellow-l-100) !important;
	border-color: var(--color-yellow-l-300) !important;
}

.alert-orange {
	--tblr-alert-color: var(--color-orange-d-300);
	color: var(--color-orange-d-300) !important;
	background-color: var(--color-orange-l-100) !important;
	border-color: var(--color-orange-l-300) !important;
}

.alert-success,
.alert-teal,
.alert-green,
.alert-lime {
	--tblr-alert-color: var(--color-teal-d-300);
	color: var(--color-teal-d-300) !important;
	background-color: var(--color-teal-l-100) !important;
	border-color: var(--color-teal-l-300) !important;
}

/* ==========================================================================
	 BUTTONS
	 ========================================================================== */

.btn-primary {
	--tblr-btn-color: var(--color-white);
	--tblr-btn-bg: var(--color-primary);
	--tblr-btn-border-color: var(--color-primary);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-primary-d-100);
	--tblr-btn-hover-border-color: var(--color-primary-d-100);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-primary-d-200);
	--tblr-btn-active-border-color: var(--color-primary-d-200);
	--tblr-btn-disabled-color: var(--color-white);
	--tblr-btn-disabled-bg: var(--color-primary-l-500);
	--tblr-btn-disabled-border-color: var(--color-primary-l-500);
}

.btn-secondary {
	--tblr-btn-color: var(--color-white);
	--tblr-btn-bg: var(--color-secondary);
	--tblr-btn-border-color: var(--color-secondary);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-secondary-d-100);
	--tblr-btn-hover-border-color: var(--color-secondary-d-100);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-secondary-d-200);
	--tblr-btn-active-border-color: var(--color-secondary-d-200);
	--tblr-btn-disabled-color: var(--color-white);
	--tblr-btn-disabled-bg: var(--color-secondary-l-500);
	--tblr-btn-disabled-border-color: var(--color-secondary-l-500);
}

.btn-warning,
.btn-yellow {
	--tblr-btn-color: var(--color-white);
	--tblr-btn-bg: var(--color-yellow);
	--tblr-btn-border-color: var(--color-yellow);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-yellow-d-100);
	--tblr-btn-hover-border-color: var(--color-yellow-d-100);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-yellow-d-200);
	--tblr-btn-active-border-color: var(--color-yellow-d-200);
	--tblr-btn-disabled-color: var(--color-white);
	--tblr-btn-disabled-bg: var(--color-yellow-l-500);
	--tblr-btn-disabled-border-color: var(--color-yellow-l-500);
}

.btn-orange {
	--tblr-btn-color: var(--color-white);
	--tblr-btn-bg: var(--color-orange);
	--tblr-btn-border-color: var(--color-orange);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-orange-d-100);
	--tblr-btn-hover-border-color: var(--color-orange-d-100);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-orange-d-200);
	--tblr-btn-active-border-color: var(--color-orange-d-200);
	--tblr-btn-disabled-color: var(--color-white);
	--tblr-btn-disabled-bg: var(--color-orange-l-500);
	--tblr-btn-disabled-border-color: var(--color-orange-l-500);
}

.btn-success,
.btn-teal,
.btn-green,
.btn-lime {
	--tblr-btn-color: var(--color-white);
	--tblr-btn-bg: var(--color-teal);
	--tblr-btn-border-color: var(--color-teal);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-teal-d-100);
	--tblr-btn-hover-border-color: var(--color-teal-d-100);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-teal-d-200);
	--tblr-btn-active-border-color: var(--color-teal-d-200);
	--tblr-btn-disabled-color: var(--color-white);
	--tblr-btn-disabled-bg: var(--color-teal-l-500);
	--tblr-btn-disabled-border-color: var(--color-teal-l-500);
}

/* ==========================================================================
	 OUTLINE BUTTONS
	 ========================================================================== */

.btn-outline-primary {
	--tblr-btn-color: var(--color-primary);
	--tblr-btn-border-color: var(--color-primary);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-primary);
	--tblr-btn-hover-border-color: var(--color-primary);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-primary-d-100);
	--tblr-btn-active-border-color: var(--color-primary-d-100);
}

.btn-outline-secondary {
	--tblr-btn-color: var(--color-secondary);
	--tblr-btn-border-color: var(--color-secondary);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-secondary);
	--tblr-btn-hover-border-color: var(--color-secondary);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-secondary-d-100);
	--tblr-btn-active-border-color: var(--color-secondary-d-100);
}

.btn-outline-warning,
.btn-outline-yellow {
	--tblr-btn-color: var(--color-yellow-d-200);
	--tblr-btn-border-color: var(--color-yellow);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-yellow);
	--tblr-btn-hover-border-color: var(--color-yellow);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-yellow-d-100);
	--tblr-btn-active-border-color: var(--color-yellow-d-100);
}

.btn-outline-orange {
	--tblr-btn-color: var(--color-orange);
	--tblr-btn-border-color: var(--color-orange);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-orange);
	--tblr-btn-hover-border-color: var(--color-orange);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-orange-d-100);
	--tblr-btn-active-border-color: var(--color-orange-d-100);
}

.btn-outline-success,
.btn-outline-teal,
.btn-outline-green,
.btn-outline-lime {
	--tblr-btn-color: var(--color-teal);
	--tblr-btn-border-color: var(--color-teal);
	--tblr-btn-hover-color: var(--color-white);
	--tblr-btn-hover-bg: var(--color-teal);
	--tblr-btn-hover-border-color: var(--color-teal);
	--tblr-btn-active-color: var(--color-white);
	--tblr-btn-active-bg: var(--color-teal-d-100);
	--tblr-btn-active-border-color: var(--color-teal-d-100);
}

/* ==========================================================================
	 TEXT AND BORDER UTILITIES
	 ========================================================================== */

.text-primary,
.link-primary {
	color: var(--color-primary) !important;
}

.text-secondary,
.link-secondary {
	color: var(--color-secondary) !important;
}

.text-warning,
.text-yellow,
.link-warning,
.link-yellow {
	color: var(--color-yellow-d-200) !important;
}

.text-orange,
.link-orange {
	color: var(--color-orange) !important;
}

.text-success,
.text-teal,
.text-green,
.text-lime,
.link-success,
.link-teal,
.link-green,
.link-lime {
	color: var(--color-teal) !important;
}

.border-primary {
	border-color: var(--color-primary) !important;
}

.border-secondary {
	border-color: var(--color-secondary) !important;
}

.border-warning,
.border-yellow {
	border-color: var(--color-yellow) !important;
}

.border-orange {
	border-color: var(--color-orange) !important;
}

.border-success,
.border-teal,
.border-green,
.border-lime {
	border-color: var(--color-teal) !important;
}

/* ==========================================================================
	 FORM STATES / FOCUS
	 ========================================================================== */

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible,
.page-link:focus {
	border-color: var(--color-primary-l-400) !important;
	box-shadow: 0 0 0 0.25rem var(--color-primary-l-300) !important;
}

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

.form-range::-webkit-slider-thumb {
	background-color: var(--color-primary) !important;
}

.form-range::-moz-range-thumb {
	background-color: var(--color-primary) !important;
}

/* ==========================================================================
	 PAGINATION / NAV / PROGRESS
	 ========================================================================== */

.page-link {
	color: var(--color-primary);
}

.active > .page-link,
.page-link.active {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

.progress-bar {
	background-color: var(--color-primary) !important;
}

.progress-bar.bg-secondary {
	background-color: var(--color-secondary) !important;
}

.progress-bar.bg-warning,
.progress-bar.bg-yellow {
	background-color: var(--color-yellow) !important;
}

.progress-bar.bg-orange {
	background-color: var(--color-orange) !important;
}

.progress-bar.bg-success,
.progress-bar.bg-teal,
.progress-bar.bg-green,
.progress-bar.bg-lime {
	background-color: var(--color-teal) !important;
}

/* ==========================================================================
	 MENUS / TABLE HEADERS
	 ========================================================================== */

.navbar .nav-link,
.navbar-vertical .nav-link,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-header,
.nav .nav-link,
.menu-item {
	color: var(--color-noir) !important;
}

.table thead th,
.markdown > table thead th {
	color: var(--color-noir) !important;
	height: 40px;
}

.table a,
.markdown > table a {
	color: var(--color-noir) !important;
}

.table > :not(caption) > * > *,
.markdown > table > :not(caption) > * > * {
	font-family: var(--tblr-body-font-family) !important;
	font-size: var(--type-body-medium-size) !important;
	font-weight: 400 !important;
	line-height: var(--type-body-medium-line-height) !important;
}

.table tbody td,
.table tbody th,
.markdown > table tbody td,
.markdown > table tbody th {
	padding: 1rem !important;
}

.table-hover-light > tbody > tr:hover > * {
	background-color: rgba(243, 243, 243, 0.5) !important;
}

.navbar .nav-link.active,
.navbar-vertical .nav-link.active,
.nav .nav-link.active,
.navbar .nav-item.active > .nav-link,
.navbar-vertical .nav-item.active > .nav-link,
.nav .nav-item.active > .nav-link,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
	color: var(--color-white) !important;
	background-color: var(--color-primary);
	/* &:hover {
		background-color: var(--color-primary);
	} */
}

.navbar .nav-item.active > .nav-link .nav-link-title,
.navbar-vertical .nav-item.active > .nav-link .nav-link-title,
.nav .nav-item.active > .nav-link .nav-link-title {
	color: var(--color-white) !important;
}

.card-header-tabs .nav-link.active,
.card-header-tabs .nav-item.active > .nav-link {
	color: var(--color-noir) !important;
	background-color: var(--color-white);
}

.navbar .nav-link:hover,
.navbar .nav-link:hover .nav-link-title,
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:hover .nav-link-title,
.nav .nav-link:hover,
.nav .nav-link:hover .nav-link-title {
	color: var(--color-noir) !important;
	
}

.badge {
	font-size: 0.875rem;
	font-weight: 400 !important;
	padding: 0.25rem 0.5rem !important;
	border-radius: var(--spacing-3, 0.25rem) !important;
}















.badge-user {
	aspect-ratio: 1;
	font-size: 16px;
	background-color: var(--color-primary);
	color:white;
}

.headline {
	font-weight: 500;
	margin-bottom: 8px;
	&.large {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	&.medium {
		font-size: 1.75rem;
		line-height: 2.25rem;
	}
	&.small {
		font-size: 1.5rem;
		line-height: 2em;
	}
}
.title {
	font-weight: 500;
	.large {
		font-size: 1.125rem;
		line-height: 2.75rem;
	}
	.medium {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.small {
		font-weight: 600;
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}
p {
	font-weight: 400;
	.large {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.medium {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
	.small {
		font-size: 0.75rem;
		line-height: 1.25rem;
	}
}
label {
	font-weight: 500;
	.large {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.medium {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
	.small {
		font-size: 0.75rem;
		line-height: 1rem;
	}
}
#info {
	background-color: white;
	border-radius: 16px;
	padding: 16px 24px;
}
.table-responsive {
	border-radius: 8px;
	border: solid 1px var(--color-grey);
	margin-bottom: 24px;
}
.alert-icon {
	font-size: 1.1rem;
	margin-top: -2px;
}
.ts-wrapper {
	box-shadow: var(--tblr-shadow-input) !important;
	.ts-control {
		padding-top: 9px;
		padding-bottom: 9px;
	}
}
[class^="icon-"],
[class*=" icon-"] {
	font-size: 1.1rem;
	/* margin-top: -2px; */
	line-height: normal;
}
.btn:has([class^="icon-"]) {
	gap: 16px;
}
.notyf__message p {
	margin: 0 !important;
}
.btn:has([class^="icon-"]) {
	gap: 8px;
}
.preview-contrato {
	max-width:950px;
	margin-left:auto;
	margin-right:auto;
	.card {
		max-height: calc(100vh - 450px);
		overflow: auto;
		object {
			height: calc(100vh - 550px);
		}
	}
	mark {
		background-color: var(--color-yellow-l-100);
		padding-left: 8px;
		padding-right: 8px;
		&:empty {
			background-color: var(--color-secondary-l-100);
			&::before {
				content: attr(data-var);
				font-weight: bold;
				color: var(--color-secondary-d-100);
			}
		}
	}
	.ver-soportes {
		.soporte-item {
			border: 1px solid #B5B5B5;
			border-radius: 4px;
			overflow: hidden;
		}
		.imagen-wrapper {
			aspect-ratio: 16 / 9;
			position: relative;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.soporte-content-wrapper {
			padding: 12px;
			display: flex;
            flex-direction: column;
            gap: 12px;
			.soporte-ref {
				text-align: right;
			}
		}
		.soporte-footer {
			padding: 12px;
			background-color: var(--bg-color-grey-10);
			.soporte-precio {
				text-align: right;
			}
		}
	}
}
.nav-link:focus {
	background-color: unset;
}
.page {
	padding: 24px 24px 0 24px;
	background-color: var(--color-light-grey);
	.header-wrapper {
		.header-top {
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			.navbar-nav {
				.badge {
					font-size: 12px !important;
					padding: 2px 0.25rem !important;
				}
				.nav-link:hover, 
				.nav-link:focus {
					background-color: var(--color-primary-l-100);
				}
				.dropdown-item:hover, 
				.dropdown-item:focus {
					background-color: var(--color-primary-l-100);
				}
			}
		}
		.header-bottom {
			border-bottom-left-radius: 16px;
			border-bottom-right-radius: 16px;
			.navbar {
				box-shadow: none;
				border-bottom-left-radius: 16px;
				border-bottom-right-radius: 16px;
				.nav-item {
					margin-right: 2px;
					&.active {
						.nav-link {
							background-color: var(--color-primary);
							color: white;
							&:hover {
								background-color: var(--color-primary);
								color: var(--color-navbar);
							}
						}
						&::after {
							content: none;
						}
					}
					.nav-link {
						&:hover {
							background-color: var(--color-primary-l-100);
						}
					}
					.dropdown-item:hover, 
					.dropdown-item:focus {
						background-color: var(--color-primary-l-100);
						&.active {
							background-color: var(--color-primary);
						}
					}
				}
			}
		}
	}
}