@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
	/* Colors */
	--color1: #1e3a5f;
	/* 0.35, 0.07, 256 */
	--color1Dark: oklch(from var(--color1) calc(l - 0.1) c h);
	--color1Light: oklch(from var(--color1) calc(l + 0.09) calc(c + 0.02) h);
	--color1-200: oklch(from var(--color1) calc(l + 0.53) calc(c - 0.01) calc(h - 2));
	/* 0.88, 0.06, 254 */
	--text: oklch(from var(--color1) calc(l - 0.14) calc(c - 0.03) calc(h + 9));
	/* 0.21, 0.04, 265 */
	--textMuted: oklch(from var(--color1) calc(l + 0.2) calc(c - 0.05) calc(h + 8));
	/* 0.55, 0.02, 264 */
	--bgMuted: oklch(from var(--color1) calc(l + 0.6) calc(c - 0.07) calc(h + 15));
	/* 0.95, 0.00, 271 */
	--blue: #2563eb;
	--indigo: #4f46e5;
	--amber: #d97706;
	--success: #059669;
	--success2: #10b981;
	--danger: #dc2626;
	--slate: #64748b;
	--border: #e5e7eb;
	--background: #f6f7f9;

	/* Fonts */
	--font1: 'Plus Jakarta Sans', sans-serif;
	--icons: uicons-regular-rounded;

	/* Weights */
	--thin: 100;
	--extraLight: 200;
	--light: 300;
	--regular: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;
	--extrabold: 800;
	--blackWeight: 900;

	/* Animations */
	--transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--transition2: all 0.25s ease-in-out;

	/* Spacing */
	--spacing: 16px;
}

/* General */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
}

.textMuted {
	color: var(--textMuted);
}

.text-success {
	color: var(--success);
}

.text-blue {
	color: var(--blue);
}

.text-danger {
	color: var(--danger);
}

.text-slate {
	color: var(--slate);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background-color: rgb(from var(--color1) r g b / 10%);
}

::-webkit-scrollbar-thumb {
	background-color: rgb(from var(--color1) r g b / 20%);
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	background: var(--background);
	font-family: var(--font1);
	font-size: 1.4rem;
	line-height: 1.4;
	color: var(--text);

	&:has(.k-modal.k-display-inline-flex) {
		overflow: hidden;
	}
}

main {
	overflow: clip;
	min-height: 100dvh;
	padding: 64px var(--spacing) 0;
	display: flex;
	justify-content: center;
	align-items: start;
	gap: 30px;
}

i[class*=" fi-rr-"] {
	display: inline-flex;
	line-height: 1;
	align-items: center;
	justify-content: center;
	width: auto;
}

a {
	text-decoration: none;
}

#loader {
	position: fixed;
	inset: 0;
	background-color: white;
	z-index: 9999 !important; /* Por encima de todo, incluso del header */
	display: flex;
	align-items: center;
	justify-content: center;
	.spinner {
		svg {
			height: 200px;
			display: block;
			margin: 0 auto;

			path {
				animation-duration: 1s;
				animation-name: pulse;
				animation-iteration-count: infinite;
				fill: var(--color1);

				&.path-7 {
					animation-delay: -1s
				}

				&.path-6 {
					animation-delay: -.875s
				}

				&.path-5 {
					animation-delay: -.75s
				}

				&.path-4 {
					animation-delay: -.625s
				}

				&.path-3 {
					animation-delay: -.5s
				}

				&.path-2 {
					animation-delay: -.375s
				}

				&.path-1 {
					animation-delay: -.25s
				}

				&.path-0 {
					animation-delay: -.125s
				}
			}
		}
	}
}

@keyframes pulse {
	0% {
		opacity: 0.1;
	}

	30% {
		opacity: 0.8;
	}

	100% {
		opacity: 0.1;
	}
}

.containerSmall {
	max-width: 768px;
}

/* ================================= */
/* Admin Participants */
/* ================================= */
.title_ {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: .75rem;
	align-items: center;
	margin-bottom: 2rem;

	.icon_ {
		background: var(--color1);
		width: 4rem;
		height: 4rem;
		line-height: 0;
		border-radius: 1.6rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 0 0 auto;

		i {
			color: #ffffff;
			display: block;
			text-align: center;
			font-size: 2rem;
		}
	}

	.info_ {
		color: var(--text);
		flex: 1 1 300px;

		h1 {
			font-size: 2rem;
			line-height: 1.8rem;
			font-weight: var(--bold);
		}

		p {
			color: var(--textMuted);
			font-size: 1.4rem;
			line-height: 1.4rem;
			margin: 0;
		}
	}

	.contestInfo {
		margin-top: 1rem;
		flex: 1 0 100%;
		width: auto;
	}

	&.v2 {
		.icon_ {
			background: transparent;

			i {
				color: var(--amber);
			}
		}

	}

}

/* Navigation */
#navbar1 {
	border: none;
	padding: 0 var(--spacing);
	background-color: var(--color1);
	color: white;
	box-shadow: none;
	height: 64px;
	gap: 8px;
	line-height: 1.2;
	z-index: 2;

	.sm-brand {
		padding: 0;
		color: white;
		font-size: 1.4rem;
		font-weight: var(--semibold);
		flex: 1 0 0;
		min-width: 0;

		a {
			display: flex;
			align-items: center;
			gap: 10px;

			img {
				height: 40px;
			}

			.title {
				display: flex;
				flex-direction: column;
				min-width: 0;

				p {
					margin: 0;
					line-height: 1;
					font-weight: var(--bold);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #ffffff;
				}

				.small {
					margin: 2px 0 0;
					color: var(--color1-200);
					letter-spacing: 0.025em;
					text-transform: uppercase;
					font-weight: var(--medium);
					font-size: 1rem;
				}
			}
		}
	}

	.sm-toggler {
		order: 1;

		.sm-toggler-anchor {
			padding: 0;
			line-height: 1;
			border-radius: 12px;
			text-decoration: none;
			font-size: 1.6rem;

			i {
				width: 36px;
				aspect-ratio: 1;
			}

			&:hover {
				background-color: rgb(from white r g b / 0.1);
			}
		}
	}

	.sm-collapse {
		position: absolute;
		inset: 100% 0 auto;
		background-color: var(--color1Light);

		.sm-nav {
			padding: 12px 16px;
			gap: 4px;

			.sm-nav-link {
				padding: 12px 16px;
				font-size: 1.4rem;
				color: var(--color1-200);
				gap: 12px;
				border-radius: 12px;
				font-weight: var(--semibold);
				line-height: 1.4;
				transition: var(--transition);

				&:hover,
				&.sm-expanded,
				&:active {
					background-color: rgb(from white r g b / 0.1);
					color: white;
				}
			}
		}

		.sm-sub {
			border-radius: 12px;
			padding: 0;
			background-color: rgb(from white r g b / 0.1);

			.sm-sub-link {
				border-radius: 12px;
				padding: 12px 16px;
				color: white;
				font-size: 1.4rem;
				font-weight: var(--semibold);
				transition: var(--transition);

				&:hover,
				&.sm-expanded,
				&:active {
					background-color: rgb(from white r g b / 0.1);
					color: white;
				}
			}
		}

		.sm-sub-item-separator {
			border-color: white;
		}
	}

	.userMenu {
		margin: 0 0 0 auto;

		.dropdown-toggle {
			border-radius: 12px;
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 12px;
			background-color: transparent;
			border: none;
			color: white;
			transition: var(--transition);

			.userInitials {
				width: 28px;
				aspect-ratio: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: var(--success);
				font-size: 1.2rem;
				font-weight: var(--bold);
			}

			.username {
				font-weight: var(--semibold);
				display: none;
			}

			&:after {
				content: none;
			}

			&:hover {
				background-color: rgb(from white r g b / 0.1);
			}
		}

		.dropdown-menu {
			box-shadow: 0 8px 24px 0 rgb(30 58 95 / 0.12);
			border: 1px solid var(--border);
			border-radius: 16px;
			min-width: 208px;
			animation: fadeIn 0.2s ease-out;
			padding: 0;

			.dropdown-header {
				padding: 12px 16px;

				.name {
					color: var(--text);
					font-weight: var(--semibold);
					font-size: 1.4rem;
				}

				p {
					color: var(--textMuted);
					font-size: 1.2rem;
					margin: 2px 0 0;
				}
			}

			.dropdown-divider {
				margin: 0;
				border-color: var(--border);
			}

			.dropdown-item {
				padding: 10px 16px;
				color: var(--text);
				font-size: 1.4rem;
				gap: 10px;
				display: flex;
				align-items: center;
				line-height: 1.4;
				transition: var(--transition);

				i {
					color: var(--textMuted);
				}

				&.danger {
					color: var(--danger);

					i {
						color: currentColor;
					}
				}

				&:hover {
					background-color: var(--bgMuted);
				}
			}
		}
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		margin: 4px 0 0;
	}

	100% {
		opacity: 1;
		margin: 0;
	}
}

/* Footer */
footer {
	padding: 16px var(--spacing);
	text-align: center;
	gap: 16px;
	background-color: white;
	border-top: 1px solid var(--border);

	.footerContainer {
		max-width: 1408px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	p {
		margin: 0 auto;

		i {
			position: relative;
			top: 2px;
			margin: 0 2px;
			color: var(--textMuted);
		}

		.cooperativeName {
			font-weight: var(--bold);
		}

		a {
			font-weight: var(--bold);
			color: currentColor;
			transition: var(--transition);

			&:hover {
				color: var(--textMuted);
			}
		}
	}

	small {
		font-weight: var(--medium);
		font-size: 1.2rem;
		color: var(--textMuted);
		display: block;
	}
}

/* TAB CONTENT */
.navline_ {
	border-radius: 1.6rem;
	padding: .5rem;
	border: 0 solid #e5e7eb;
	background: var(--bgMuted);
	overflow-x: auto;
	gap: .4rem;
	display: flex;
	margin-bottom: 2.5rem;
	transition: var(--transition);

	.icofilt_ {
		color: var(--textMuted);
		margin: 0 1rem;
	}

	.nav-link {
		transition: var(--transition);
		font-weight: var(--semibold);
		font-size: 1.4rem;
		line-height: 2rem;
		border-radius: 1.2rem;
		gap: .8rem;
		color: var(--textMuted);
		border: 0px;
		justify-content: center;
		align-items: center;
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding-left: 1.6rem;
		padding-right: 1.6rem;
		white-space: nowrap;
		display: flex;
		flex: 1 1 0%;

		i {
			font-size: 1.4rem;
			line-height: 0;
		}

		span {
			display: none;
		}

		&:hover {
			color: var(--text);
			cursor: pointer;
		}

		&.active {
			background: #ffffff;
			color: var(--text);
			box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, .05);
		}
	}

	&.w-fit {
		width: -moz-fit-content;
		width: fit-content;

		span {
			display: inline;

			span {
				font-size: 1.2rem;
				line-height: 1.6rem;
				padding: .2rem .6rem;
				border-radius: 9999px;
				font-weight: var(--bold);
				background: rgb(from var(--textMuted) r g b / 0.1);
				display: inline-block;
				margin-left: 5px;
			}
		}
	}

	&.minpills_ {
		background: transparent;

		.nav-link {
			font-size: 1.2rem;
			line-height: 1.6rem;
			font-weight: var(--medium);
			padding: .6rem 1.2rem;
			border-radius: 9999px;

			&.active {
				background: var(--color1);
				color: #ffffff;

				span {
					span {
						background: rgb(from #ffffff r g b / 0.1);
					}
				}
			}
		}

		span {
			span {
				margin-left: 0px;
			}
		}

	}

	&.ajustadas {
		padding: 4px;

		.nav-link {
			font-size: 1.2rem;
			padding: 0.8rem 1.2rem;
			flex: 0;
			line-height: 1.2;

			i {
				font-size: 1em;
			}
		}
	}
}

.row-gap-fix {
	--bs-gutter-x: 16px;
	--bs-gutter-y: 16px;
}

.datacol_ {
	display: flex;
	align-items: center;
	background: #ffffff;
	padding: 1.6rem;
	border: 1px solid var(--border);
	border-radius: 1.6rem;
	gap: 1.2rem;
	height: 100%;

	span {
		width: 4.2rem;
		height: 4.2rem;
		line-height: 0;
		border-radius: 1.6rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.8rem;
	}

	p {
		color: var(--text);
		font-size: 2rem;
		line-height: 2rem;
		font-weight: var(--bold);
		margin: 0;
		top: -2px;
		position: relative;

		em {
			font-style: normal;
		}

		&.text-2xl {
			font-size: 2.5rem;
			line-height: 2rem;
			font-weight: var(--extrabold);
			top: 0px;
		}

		&.text-1xl {
			font-size: 1.4rem;
			line-height: 2rem;
			font-weight: var(--extrabold);
			top: 0px;
		}
	}

	small {
		font-weight: var(--medium);
		font-size: 1.2rem;
		color: var(--textMuted);
		display: block;
	}

	&.success p,
	&.success small {
		color: var(--success);
	}

	&.amber p,
	&.amber small {
		color: var(--amber);
	}

	&.blue p,
	&.blue small {
		color: var(--blue);
	}

	&.indigo p,
	&.indigo small {
		color: var(--indigo);
	}

	&.danger p,
	&.danger small {
		color: var(--danger);
	}

	&.slate p,
	&.slate small {
		color: var(--slate);
	}
}

.bg-soft {
	--currentColor: var(--text);

	color: var(--currentColor);
	border-color: rgb(from var(--currentColor) r g b / .08);
	background-image: linear-gradient(rgb(from var(--currentColor) r g b / 0.08), rgb(from var(--currentColor) r g b / 0.08));

	&.blue {
		--currentColor: var(--blue);
	}

	&.success {
		--currentColor: var(--success);
	}

	&.indigo {
		--currentColor: var(--indigo);
	}

	&.amber {
		--currentColor: var(--amber);
	}

	&.danger {
		--currentColor: var(--danger);
	}

	&.slate {
		--currentColor: var(--slate);
	}
}

.alerbox_ {
	padding: 1.6rem;
	border-radius: 1.6rem;
	gap: 1.2rem;
	height: 100%;

	--currentColor: var(--text);

	background: rgb(from var(--currentColor) r g b / 0.05);
	border: 1px solid rgb(from var(--currentColor) r g b / 0.08);

	&.slate {
		--currentColor: var(--slate);
	}

	&.min {
		padding: 1rem 1.6rem;
	}

}

/* Kendo Grid */
.k-grid {
	color: var(--text);
	border-color: var(--border);
	background-color: transparent;
	border: 0px;
	margin: 20px 0 0;

	.k-toolbar {
		background-image: none;
		color: currentColor;
		background-color: transparent;
		padding: 0;
		border: none;
		gap: 0;
		overflow: visible;

		&:before {
			content: none;
		}

		.toolbarContainer {
			background-color: white;
			padding: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			flex-direction: row;
			width: 100%;
			border: 1px solid var(--border);
			border-radius: 16px;
			margin: 0 0 20px;
			flex-wrap: wrap;

			&.nobg_ {
				background-color: transparent;
				padding: 0px;
				border: 0px solid var(--border);
			}

			.inputIcon {
				position: relative;
				width: 100%;

				i {
					position: absolute;
					color: var(--textMuted);
					top: 1.4rem;
					left: 1.3rem;
					font-size: 1.2rem;
				}

				input {
					font-size: 1.4rem;
					line-height: 2rem;
					color: var(--textMuted);
					padding-right: 1.2rem;
					padding-left: 3.6rem;
					padding-top: 1rem;
					padding-bottom: 1rem;
					border-radius: 1.6rem;
					width: 100%;
					border: 1px solid var(--border);

					&:focus {
						border-color: var(--color1);
						outline: 2px solid transparent;
						outline-offset: 2px;
						box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgba(30, 58, 95, .3), 0 0 #0000;
					}
				}

			}

			&.dark {
				background: var(--color1);
				border: 1px solid var(--color1);
			}

			.contenedorSeleccion {
				width: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				flex-direction: column;
				gap: 1.5rem;

				.contadorSeleccion {
					display: flex;
					align-items: center;
					gap: .5rem;
					font-weight: var(--bold);
					font-size: 1.4rem;
					line-height: 2rem;
					color: #ffffff;

					button {
						color: #fff;
						border: 0 !important;
						background: transparent !important;
						display: flex;
						align-items: center;
						opacity: .7;
						transition: var(--transition);

						&:hover {
							opacity: 1;
						}
					}
				}
			}

			.accionesSeleccion {
				display: flex;
				align-items: center;
				gap: .5rem;

				.btnsimplee,
				.btnsimpler {
					display: flex;
					align-items: center;
					gap: .6rem;
					border-radius: 9999px;
					border: 0px !important;
					font-weight: var(--semibold);
					font-size: 1.2rem;
					line-height: 1.6rem;
					color: #ffffff;
					padding: .6rem 1.2rem;
					background-color: rgb(255 255 255 / 15%);
					transition: var(--transition);

					&:hover {
						background-color: rgb(255 255 255 / 25%);
					}
				}

				.btnsimpler {
					background: rgb(from var(--danger) r g b / 0.8);

					&:hover {
						background: rgb(from var(--danger) r g b / 1);
					}
				}

				.dropdown-menu {
					box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
					padding: .6rem 0;
					min-width: 160px;
					border: 0px solid var(--border);
					border-radius: 1.6rem;
					overflow: hidden;

					.dropdown-item {
						color: var(--text);
						font-size: 1.4rem;
						line-height: 2rem;
						padding: .8rem 1.6rem;
						transition: var(--transition);

						&:hover {
							background-color: var(--bgMuted);
						}
					}
				}

			}

			.mostrando {
				color: var(--textMuted);
				font-size: 1.4rem;
				line-height: 1.6rem;

				b {
					color: var(--text);
				}
			}

			.pendientes {
				color: var(--blue);
				font-size: 1.4rem;
				line-height: 1.6rem;
				font-weight: var(--semibold);
			}

		}

		.contador {
			font-weight: var(--medium);
			font-size: 1.2rem;
			color: var(--textMuted);
			margin: 0;
			width: 100%;
		}
	}

	table {
		min-width: 100%;
	}

	.k-grid-content-expander {
		height: 0;
	}
}

.k-grid-header {
	background: var(--bgMuted);
	border: 1px solid var(--border);
	border-radius: 1.6rem 1.6rem 0 0;
	padding: 0 !important;

	.k-grid-header-wrap {
		border-color: rgb(0 0 0 / 0%);
	}

	.k-header {
		text-transform: uppercase;
		font-weight: var(--semibold);
		font-size: 1.2rem;
		line-height: 2rem;
		color: var(--textMuted);
		padding: 1.2rem 1.2rem 1rem 1.2rem;
		border-color: rgb(0 0 0 / 0%);

		&.k-sorted {
			background-color: rgb(0 0 0 / 0%);

			.k-i-sort-asc-sm::before,
			.k-i-sort-desc-sm::before {
				font-family: var(--icons);
				color: var(--textMuted);
			}

			.k-i-sort-asc-sm::before {
				content: "\e0a4";
			}

			.k-i-sort-desc-sm::before {
				content: "\e0a1";
			}

		}

	}
}

.k-grid-content {
	border: 1px solid var(--border);
	border-top: 0px;
	border-radius: 0 0 1.6rem 1.6rem;
	overflow: auto;

	.k-master-row,
	tr.k-alt {
		background-color: #ffffff;
	}

	tr.k-state-selected>td {
		background: rgb(from var(--color1) r g b / 0.05);
	}

	td {
		border-color: var(--border);
		border-width: 0 0 1px 0;
		padding: 1.2rem 1rem;
	}

	tr:not(.k-detail-row):hover {
		background: rgb(from var(--textMuted) r g b / 0.05) !important;
	}

	.otp {
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
		font-weight: var(--bold);
		letter-spacing: .1em
	}

	.name {
		font-weight: var(--semibold);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
	}

	.document {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);

		&.space_ {
			display: flex;
			margin: .4rem 0rem;
			align-items: center;
			gap: .6rem;
		}
	}

	.email {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--text);
	}

	.phone {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);
	}

	.office {
		i {
			color: var(--textMuted);
			font-size: 1rem;
			margin-right: 5px;
		}

		span {
			font-size: 1.4rem;
			line-height: 2rem;
			color: var(--text);
		}
	}

	.puntos {
		font-weight: var(--extrabold);
		font-size: 1.6rem;
		line-height: 2.4rem;
		color: var(--textMuted);

		&.success {
			color: var(--success);
		}

		&.danger {
			color: var(--danger);
		}

		&.blue {
			color: var(--blue);
		}
	}

	.actionsContainer {
		display: flex;
		gap: .5rem;
		justify-content: end;

		.action {
			display: flex;
			align-items: center;
			border: 0px;
			transition: var(--transition);
			border-radius: 1.2rem;
			padding: .8rem;
			background: transparent;
			color: var(--textMuted);

			&.view {
				&:hover {
					background: var(--bgMuted);
					color: var(--textMuted);
				}
			}

			&.edit {
				&:hover {
					background: rgb(from var(--color1-200) r g b / 0.2);
					color: var(--color1);
				}
			}

			&.delete {
				&:hover {
					background: rgb(from var(--danger) r g b / 0.07);
					color: var(--danger);
				}
			}

			&.cambiarEstado {
				i {
					transition: var(--transition2);
					font-size: 1.6rem;
				}

				.fi-rr-toggle-on {
					color: var(--success2);
				}
			}

		}
	}

	.k-grid-norecords-template {
		width: auto;
		height: 10em;
		color: var(--textMuted);
		border: 0 solid;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		line-height: 2rem;

		i {
			font-size: 2rem;
			margin-bottom: 1.5rem;
			color: rgb(from var(--textMuted) r g b / .3);
		}

		h3 {
			margin-bottom: 8px;
			font-size: 1.4rem;
			line-height: 2rem;
			font-weight: var(--semibold);
		}

		p {
			margin: 0;
			font-size: 1.2rem;
			line-height: 1.6rem;
		}
	}

	.user {
		display: flex;
		align-items: center;
		gap: 1rem;
		flex: 1 1 calc(50% - .8rem);

		.userInitials {
			width: 3.2rem;
			min-width: 3.2rem;
			height: 3.2rem;
			border-radius: 9999px;
			font-size: 1.2rem;
			line-height: 3.2rem;
			font-weight: var(--bold);
			background: var(--bgMuted);
			color: var(--textMuted);
			text-align: center;
			display: block;
		}

		.userData {
			.userName {
				font-size: 1.4rem;
				line-height: 1.8rem;
				font-weight: var(--semibold);
				color: var(--text);
			}

			.userDate {
				font-size: 1.1rem;
				line-height: 1.4rem;
				font-weight: var(--regular);
				color: var(--textMuted);
			}

			.userForecasts {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
			}
		}

	}

	.personaActual {
		background-color: rgb(from var(--blue) r g b / 7%);

		.user {
			.userInitials {
				background: var(--color1);
				color: #ffffff;
			}

			.userData {
				.userName {
					.bg-primary {
						background-color: var(--color1) !important;
						font-size: 1rem;
						border-radius: 30px;
						position: relative;
						top: -2px;
					}
				}
			}
		}

		td:first-child {
			border-left: 2px solid rgb(from var(--blue) r g b / 80%);
		}
	}

	.pronostico {
		font-size: 1.2rem;

		span {
			font-size: 1.2rem;
			font-weight: var(--bold);
		}

		&.success {
			color: var(--success);
		}

		&.danger {
			color: var(--danger);
		}

		.fi-rr-minus {
			color: var(--slate);
		}

	}


}

.k-grid-pager,
.k-listview-pager {
	background: #fff;
	margin-top: 1.6rem;
	border: 1px solid var(--border);
	padding: 1.2rem 1.5rem;
	border-radius: 1.6rem;
	flex-wrap: wrap;
	gap: 10px 0;

	.k-pager-info {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);
	}

	.k-pager-sizes {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);
		text-transform: capitalize;

		.k-dropdownlist {
			background: transparent;
			border: 1px solid var(--border);
			border-radius: 40px;
			padding-left: .5rem;
		}

		.k-i-arrow-s::before {
			color: var(--textMuted);
			content: '\e0a1';
			font-family: var(--icons);
		}
	}

	.k-link {
		color: var(--text);
		border-radius: 4px;
		box-shadow: none !important;

		&:hover {
			color: var(--color1);
			background-color: rgb(from var(--color1) r g b / 0.05);
		}

		&.k-state-selected {
			color: var(--color1);
			font-weight: var(--extrabold);
			background-color: rgb(from var(--color1) r g b / .1);
		}

		.k-i-arrow-60-right::before,
		.k-i-arrow-60-left::before,
		.k-i-arrow-end-right::before,
		.k-i-arrow-end-left::before {
			color: var(--textMuted);
			font-family: var(--icons);
		}

		.k-i-arrow-60-right::before {
			content: '\e0a3';
		}

		.k-i-arrow-60-left::before {
			content: '\e0a2';
		}

		.k-i-arrow-end-left::before {
			content: '\e09b';
		}

		.k-i-arrow-end-right::before {
			content: '\e09c';
		}
	}

}





/* STATUS */
.status {
	display: inline-flex;
	align-items: center;
	font-weight: var(--semibold);
	gap: .5rem;
	font-size: 1.2rem;
	line-height: 1.6rem;
	padding: .2rem 1rem .2rem 1rem;
	border-width: 1px;
	border-style: solid;
	border-radius: 9999px;

	--currentColor: var(--text);

	background-image: linear-gradient(rgb(from var(--currentColor) r g b / 0.05), rgb(from var(--currentColor) r g b / 0.05));
	background-color: white;
	border-color: rgb(from var(--currentColor) r g b / 0.2);
	color: var(--currentColor);

	&.success {
		--currentColor: var(--success);
	}

	&.blue {
		--currentColor: var(--blue);
	}

	&.amber {
		--currentColor: var(--amber);
	}

	&.danger {
		--currentColor: var(--danger);
	}

	&.slate {
		--currentColor: var(--slate);
	}

	&.border-0 {
		color: var(--slate);
		font-weight: var(--medium);
	}

	.indicator {
		width: 5px;
		height: 5px;
		display: inline;
		background: var(--success);
		border-radius: 5px;
	}

}

/* CHECKBOX */
.k-checkbox {
	border-color: var(--textMuted);
	box-shadow: none !important;

	&:checked {
		border-color: var(--color1);
		color: #fff;
		background-color: var(--color1);
	}
}

/* .k-selected */
.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
	background-color: var(--color1)
}

.k-list-item.k-selected.k-hover,
.k-list-item.k-selected:hover,
.k-selected.k-hover.k-list-optionlabel,
.k-selected.k-list-optionlabel:hover {
	background-color: var(--color1)
}

.k-calendar .k-calendar-td.k-state-selected .k-link,
.k-calendar .k-calendar-td.k-state-selected:hover .k-link {
	background-color: var(--color1)
}

.k-calendar .k-calendar-view .k-today {
	color: var(--color1);
	font-weight: var(--extrabold)
}

.k-calendar .k-nav-today {
	color: var(--color1) !important;
}

/* k_dropdownlist */
.k_dropdownlist {
	min-width: 140px;
	z-index: 0;
	width: 100%;
	position: relative;

	.k-picker,
	.k-input.k-combobox {
		height: 100%;
		min-height: 42px;
		border-radius: 1.6rem;
		width: 100%;
		border: 1px solid var(--border);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
		padding: 0rem 1.2rem 0rem 1.2rem;
		box-shadow: none;
		background: #ffffff;

		&:focus {
			border-color: var(--color1);
			outline: 2px solid transparent;
			outline-offset: 2px;
			box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgba(30, 58, 95, .3), 0 0 #0000;
		}
	}

	.k-input-md .k-input-button {
		background: transparent;
	}

	.k-i-arrow-s::before {
		color: var(--textMuted);
		content: '\e0a1';
		font-family: var(--icons);
	}

	.k-picker .k-input-value-text i {
		font-size: 1.2rem;
		margin-right: .5rem;
	}

}

/* KENDO INPUT */
.k_input {
	width: 100%;
	position: relative;

	input,
	textarea {
		height: 100%;
		min-height: 42px;
		border-radius: 1.6rem;
		width: 100%;
		border: 1px solid var(--border);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
		padding: 0rem 1.2rem;
		box-shadow: none;
		background: #ffffff;

		&:focus {
			border-color: var(--color1);
			outline: 2px solid transparent;
			outline-offset: 2px;
			box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgba(30, 58, 95, .3), 0 0 #0000;
		}

		&::placeholder {
			color: var(--textMuted);
			opacity: 1;
		}

		&::-webkit-input-placeholder {
			color: var(--textMuted);
		}

		&:-ms-input-placeholder {
			color: var(--textMuted);
		}

		&::-ms-input-placeholder {
			color: var(--textMuted);
		}

		&[type="number"] {
			-moz-appearance: textfield;
			appearance: none;

			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}

	textarea {
		height: 100px;
		padding: 1.2rem;
	}

	&.inputgroup {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 6px;
		position: relative;
		padding-bottom: 2.5rem;

		input {
			flex: 1;
			min-width: 0;
		}

		em {
			display: flex;
			align-items: center;
			padding: 0 1rem;
			white-space: nowrap;
		}

	}
}

/* KENDO DATEPICKER */
.k_datepicker {
	position: relative;

	.k-input {
		height: 100%;
		min-height: 42px;
		border-radius: 1.6rem;
		width: 100%;
		border: 1px solid var(--border);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
		padding: 0rem 1.2rem;
		box-shadow: none;
		background: #ffffff;

		&:focus {
			border-color: var(--color1);
			outline: 2px solid transparent;
			outline-offset: 2px;
			box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) rgba(30, 58, 95, .3), 0 0 #0000;
		}
	}

	.k-icon-button.k-button-md>.k-button-icon {
		font-size: 1.2rem;
	}

	.k-button-solid-base {
		background: transparent;
	}

	.k-i-calendar::before {
		color: var(--textMuted);
		content: '\e372';
		font-family: var(--icons);
	}

	.k-i-clock::before {
		color: var(--textMuted);
		content: '\e4d0';
		font-family: var(--icons);
	}

}


.buttonsContainer {
	margin-top: 2rem;
	margin-bottom: 2rem;
	gap: 1rem;
	display: flex;
	flex-wrap: wrap;
}

.st_alertsContainer {
	position: relative;

	.alert {
		display: flex;
		align-items: center;
		gap: 1.6rem;
		width: 100%;

		i {
			font-size: 1.8rem;
		}

		span {
			p {
				font-size: 1.2rem;
				line-height: 1.6rem;
				font-weight: var(--medium);
				margin: 0;
			}

			.number {
				font-size: 2.4rem;
				line-height: 3.2rem;
				font-weight: var(--bold);
			}
		}

		.btn_simpleDark {
			i {
				font-size: 1.2rem;
			}
		}

	}
}

.alertContent,
.alert .alertContent {
	width: 100%;

	h2,
	b {
		font-weight: var(--semibold);
		margin: 0;
	}

	h2 {
		button {
			display: flex;
			align-items: center;
			padding: 0rem;
			border: 0px;
			background: transparent;
			font-size: 1.2rem;
			font-weight: var(--semibold);
			transition: var(--transition2);
			color: var(--color1Light);

			i {
				font-size: 1.2rem;
			}
		}

		&[aria-expanded="true"] button {
			opacity: .7;
		}


	}


}

/*BUTTON SIMPLE GRAY*/
.btn_simplegray {
	gap: 6px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: var(--semibold);
	font-size: 1.4rem;
	line-height: 2rem;
	border-radius: 1.6rem;
	padding: 0rem 1.2rem 0rem 1.2rem;
	background: transparent;
	color: var(--color1);
	border: 1px solid var(--border);
	transition: var(--transition);
	min-height: 42px;

	&:hover {
		background: var(--bgMuted);
	}

	&.outline-danger {
		border: 1px solid rgb(from var(--danger) r g b / 0.1);
		color: var(--danger);

		&:hover {
			background: rgb(from var(--danger) r g b / 0.04);
		}
	}

	&[aria-expanded="true"] {
		background: var(--color1);
		color: #ffffff;

		span {
			span {
				background: color(srgb 1 1 1);
				color: var(--color1);
				width: 18px;
				height: 18px;
				line-height: 18px;
				display: inline-block;
				border-radius: 50%;
				font-weight: var(--bold);
				font-size: 1rem;
				margin-left: .5rem;
			}
		}

	}

}

/*BUTTON SIMPLE DARK*/
.btn_simpleDark {
	gap: 6px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: var(--semibold);
	font-size: 1.4rem;
	line-height: 2rem;
	border-radius: 1.6rem;
	padding: 0rem 1.2rem 0rem 1.2rem;
	background: transparent;
	color: #ffffff;
	box-shadow: none !important;
	transition: var(--transition);
	min-height: 42px;
	background: var(--color1);
	border: 1px solid var(--color1);

	&:hover {
		border: 1px solid var(--color1Light);
		background: var(--color1Light);
		cursor: pointer;
	}

	&:disabled {
		opacity: .5;
		cursor: not-allowed;
		pointer-events: none;
		filter: grayscale(.2);
	}

	&.danger {
		background: var(--danger);
		border: 1px solid var(--danger);

		&:hover {
			border: 1px solid rgb(from var(--danger) r g b / 0.8);
			background: rgb(from var(--danger) r g b / 0.8);
		}
	}

	&.guardarNuevo {
		background: var(--blue);
		border: 1px solid var(--blue);

		&:hover {
			border: 1px solid rgb(from var(--blue) r g b / 0.8);
			background: rgb(from var(--blue) r g b / 0.8);
		}
	}

}

/* Animación del Spinner */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.fi.loading {
	animation: spin 1s linear infinite;
	vertical-align: middle;
	line-height: 1;
}

/*ENVIAR ANIMADO*/
.enviarPendiente {
	gap: 6px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: var(--semibold);
	font-size: 1.2rem;
	line-height: 1.6rem;
	border-radius: 1.6rem;
	padding: 0 1.2rem 0 1.2rem;
	background: transparent;
	color: #ffffff;
	border: 0px !important;
	box-shadow: none !important;
	transition: var(--transition);
	background: var(--color1);

	&:hover {
		background: var(--color1Light);
	}

	.fi.loading {
		animation: spin 1s linear infinite;
		vertical-align: middle;
		line-height: 1;
	}

}

/*BUTTON SIMPLE LINE*/
.btn_simpleLine {
	gap: 6px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: var(--semibold);
	font-size: 1.4rem;
	line-height: 2rem;
	border-radius: 1.6rem;
	padding: 0 1.2rem 0 1.2rem;
	background: transparent;
	color: var(--color1);
	box-shadow: none !important;
	transition: var(--transition);
	min-height: 42px;
	border: 0px solid;

	&:hover {
		opacity: .8;
	}

	&.sending_ {
		color: var(--textMuted);
		font-weight: var(--regular);

		b {
			font-weight: var(--bold);
			color: var(--color1);
		}
	}
}

/*BUTTON SIMPLE DARK*/
.btn_borderdash {
	gap: 6px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: var(--bold);
	font-size: 1.6rem;
	line-height: 2.4rem;
	border-radius: 1.6rem;
	padding: 1.6rem 2.4rem;
	background: transparent;
	color: #ffffff;
	box-shadow: none !important;
	transition: var(--transition);
	min-height: 42px;
	background: var(--color1);
	border: 1px solid var(--color1);

	&:hover {
		border: 1px solid var(--color1Dark);
		background: var(--color1Dark);
		cursor: pointer;
	}

	&:active {
		transform: scale(0.98);
	}

	&.disabled {
		opacity: 1;
		cursor: not-allowed;
		pointer-events: none;
		color: var(--textMuted);
		background: rgb(from var(--bgMuted) r g b / .5);
		border: 2px dashed var(--border);
	}
}


/* MODAL KENDO*/
.k-modal {
	width: 100%;
	font-family: var(--font1);
	box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
	border-radius: 2rem;
	border: 0px;
	inset: 50% auto auto 50% !important;
	translate: -50% -50%;
	max-width: calc(100% - 20px) !important;
	max-height: calc(100dvh - 20px);
	position: fixed;

	.k-window-titlebar {
		background: transparent;
		color: var(--text);
		padding: 2rem 2.4rem;
		border-color: var(--border);

		.k-window-title {
			font-size: 1.6rem;
			line-height: 2.4rem;
			font-weight: var(--bold);
			color: var(--text);
		}
	}

	.k-window-content {
		padding: 2.4rem;

		.k-edit-form-container {
			width: 100%;
			min-width: auto;
		}

		h2 {
			font-size: 1.4rem;
			line-height: 2.4rem;
			font-weight: var(--bold);
			color: var(--text);
			margin-bottom: .8rem;
		}

		.participant {
			display: flex;
			align-items: flex-start;
			gap: 1.6rem;
			width: 100%;
			margin-bottom: 2rem;

			.initials {
				border-radius: 9999px;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-shrink: 0;
				width: 4.8rem;
				height: 4.8rem;
				background: rgb(from var(--color1Light) r g b / .1);
				font-size: 1.8rem;
				line-height: 2.8rem;
				font-weight: var(--bold);
				color: var(--text);
			}

			.data {
				.name {
					font-size: 1.6rem;
					line-height: 2.4rem;
					font-weight: var(--bold);
					color: var(--text);
				}

				.document {
					font-size: 1.4rem;
					line-height: 2rem;
					color: var(--textMuted);
				}

				.status {
					margin-top: 6px;
				}
			}

		}

		.detailContainer {
			padding: 1.4rem;
			background: rgb(from var(--bgMuted) r g b / 80%);
			border-radius: 1.6rem;
			margin-bottom: 1.6rem;

			h3 {
				display: flex;
				align-items: center;
				font-size: 1.2rem;
				line-height: 1.6rem;
				gap: .6rem;
				font-weight: var(--medium);
				color: var(--textMuted);

				i {
					font-size: 1rem;
				}
			}

			p {
				margin: 0;
				font-size: 1.4rem;
				line-height: 2rem;
				font-weight: var(--medium);
				color: var(--text);
				word-break: break-all;

				&.confirmado {
					color: var(--success);
				}

				&.pendiente {
					color: var(--amber);
				}

				i {
					font-size: 1.2rem;
					margin-right: .5rem;
					color: rgb(from var(--blue) r g b / 1)
				}

				.fi-rr-mobile-button {
					color: rgb(from var(--indigo) r g b / 1)
				}

			}

			&.d-flex {
				justify-content: space-between;
				align-items: center;
			}

			.type {
				font-size: 1.2rem;
				line-height: 1.6rem;
				font-weight: var(--bold);
				color: var(--text);
			}

			.date {
				font-size: 1.2rem;
				line-height: 1.6rem;
				font-weight: var(--medium);
				color: var(--textMuted);
			}
		}

		.titledetail_ {
			display: flex;
			align-items: center;
			font-size: 1.2rem;
			line-height: 1.6rem;
			gap: .6rem;
			font-weight: var(--medium);
			color: var(--textMuted);
			margin-bottom: 1rem;

			i {
				font-size: 1rem;
			}
		}

		.detailshort_ {
			padding: 0rem 1.4rem;

			h3 {
				display: flex;
				align-items: center;
				font-size: 1.2rem;
				line-height: 1.6rem;
				gap: .6rem;
				font-weight: var(--medium);
				color: var(--textMuted);
			}

			p {
				margin: 0;
				font-size: 1.4rem;
				line-height: 2rem;
				font-weight: var(--semibold);
				color: var(--text);
				word-break: break-all;
				margin-bottom: 1.6rem;

				&.muted {
					font-size: 1.2rem;
					line-height: 1.6rem;
					color: var(--textMuted);
					font-weight: var(--regular);
				}

				i {
					font-size: 1rem;
				}
			}

			.detailContainer p {
				font-weight: var(--medium);
				margin: 0;
			}
		}

	}

	&:after {
		content: '';
		position: absolute;
		inset: auto 2rem 0 2rem;
		background-color: white;
		height: 2.4rem;
		z-index: 1;
	}
}

.titleData {

	h2 {
		text-wrap: auto;
		font-size: 1.6rem;
		font-weight: var(--bold);
		color: var(--text);
		margin: 0;
	}

	.date {
		font-size: 1.2rem;
		line-height: 1.6rem;
		font-weight: var(--regular);
		color: var(--textMuted);
	}

}


/* ALERTAS DE ERROR KENDO*/
.k-validator-tooltip {
	margin-top: 0px;
	border-radius: 10px;
	top: 100%;
	width: -moz-max-content;
	max-width: max-content;
	position: relative;

	.k-icon {
		font-size: 1.2rem;
	}

	.k-tooltip-content {
		font-size: 1.1rem;
	}

	.k-callout-n {
		width: 5px;
		height: 5px;
		border-width: 4px;
		top: -8px;
	}
}


/* FORM EN KENDO MODAL */
.kmodal-form {
	position: relative;
	z-index: 1;

	.form-label {
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1.2rem;
		line-height: 1.6rem;
		margin-bottom: .6rem;
		color: var(--textMuted);
	}

	.k_dropdownlist {
		width: 100%;
	}

}

.koptionsbuttons_ {
	display: flex;
	gap: 10px;
	width: 100%;
	margin: auto !important;
	position: sticky;
	bottom: 0;
	z-index: 1;
	background-color: white;
	flex-wrap: wrap;
}

/* MODAL REMOVE */
.modalConfirmacion {

	.modal-dialog {
		max-width: 380px;
	}

	.modal-content {
		display: flex;
		gap: .5rem;

		font-family: var(--font1);
		box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
		border-radius: 2rem;
		border: 0;
		padding: 2.5rem;

		.modal-header {
			border: 0px solid var(--border);

			h2 {
				font-size: 1.6rem;
				line-height: 2.4rem;
				font-weight: var(--bold);
				color: var(--text);
				margin: 0;
			}

			p {
				font-size: 1.4rem;
				line-height: 2rem;
				color: var(--textMuted);
				margin: 0;
			}

			.modalIcon i {
				display: block;
				border-radius: 9999px;
				width: 4rem;
				height: 4rem;
				line-height: 4.2rem;
				text-align: center;
				font-size: 1.6rem;
				margin-right: 10px;
				background: rgb(from var(--danger) r g b / .1);
				color: var(--danger);
			}


		}

		.modal-body {
			border: 0px solid var(--border);

			p {
				font-size: 1.4rem;
				line-height: 2rem;
				color: var(--text);
				margin: 0;

				span {
					font-weight: var(--bold);
				}
			}
		}

		.modal-footer {
			border: 0px solid var(--border);
			display: flex;
			gap: .5rem;

			button,
			.btn {
				flex: 1;
				margin: 0;
			}
		}
	}


}

/* Alert */
.alert {
	--currentColor: var(--text);
	--lightColor: rgb(from var(--currentColor) r g b / 0.05);

	padding: 16px;
	background-color: white;
	background-image: linear-gradient(var(--lightColor), var(--lightColor));
	border: 1px solid rgb(from var(--currentColor) r g b / 0.1);
	color: var(--currentColor);
	border-radius: 16px;
	margin: 0;

	h2 {
		color: oklch(from var(--currentColor) calc(l - 0.1) c h);
		font-weight: var(--bold);
		font-size: 1.4rem;
		gap: 8px;
		align-items: center;
		display: flex;
		margin: 0 0 8px;
	}

	p {
		font-size: 1.2rem;
		margin: 0 0 12px;
	}

	.row {
		--bs-gutter-x: 8px;
		--bs-gutter-y: 8px;
	}

	.pill {
		font-weight: var(--medium);
		text-align: center;
		padding: 4px 8px;
		background-color: rgb(from var(--currentColor) r g b / 0.1);
		border-radius: 12px;
		font-size: 1.2rem;
		color: var(--currentColor);

		&.blue {
			--currentColor: var(--blue);
		}

		&.success {
			--currentColor: var(--success);
		}

		&.indigo {
			--currentColor: var(--indigo);
		}

		&.amber {
			--currentColor: var(--amber);
		}

		&.danger {
			--currentColor: var(--danger);
		}

		&.warning {
			--currentColor: var(--warning);
		}

		&.slate {
			--currentColor: var(--slate);
		}
	}

	&.blue {
		--currentColor: var(--blue);
	}

	&.success {
		--currentColor: var(--success);
	}

	&.indigo {
		--currentColor: var(--indigo);
	}

	&.amber {
		--currentColor: var(--amber);
	}

	&.danger {
		--currentColor: var(--danger);
	}

	&.warning {
		--currentColor: var(--warning);
	}

	.vmini {
		.pill {
			width: -moz-fit-content;
			width: fit-content;
		}

		p {
			font-size: 1.4rem;
			line-height: 2rem;
			color: var(--text);
			font-weight: var(--semibold);
			margin: 0;
			text-align: left;
			margin-top: 5px;

			&.success {
				color: var(--success);
				font-weight: var(--bold);
			}
		}
	}

}

.notificationIcon {
	--currentColor: var(--text);
	--lightColor: rgb(from var(--currentColor) r g b / 0.05);

	background-color: #ffffff;
	background-image: linear-gradient(var(--lightColor), var(--lightColor));
	border: 1px solid rgb(from var(--currentColor) r g b / 0.1);
	color: var(--currentColor);

	width: 3.6rem;
	min-width: 3.6rem;
	height: 3.6rem;
	line-height: 3.8rem;
	text-align: center;
	border-radius: 50%;

	&.blue {
		--currentColor: var(--blue);
	}

	&.success {
		--currentColor: var(--success);
	}

	&.indigo {
		--currentColor: var(--indigo);
	}

	&.amber {
		--currentColor: var(--amber);
	}

	&.danger {
		--currentColor: var(--danger);
	}

	&.warning {
		--currentColor: var(--warning);
	}

	&.slate {
		--currentColor: var(--slate);
	}

}


/* EQUIPOS */
.name-equipo {
	display: flex;
	align-items: center;
	gap: 1rem;

	.fi {
		border-radius: .7rem;
		width: 2.4rem;
		height: 2.4rem;
	}

	.nombre {
		color: var(--text);
		font-weight: var(--semibold);
		font-size: 1.4rem;
		line-height: 2rem
	}
}

.codigo {
	font-size: 1rem;
	line-height: 1.6rem;
	color: var(--slate);
	font-weight: var(--regular);
	text-transform: uppercase;
	padding: .1rem .6rem;
	border-radius: .6rem;
	background: rgb(from var(--bgMuted) r g b / .7);
	display: inline-block;
}

.puntajes {
	color: var(--slate);

	b.danger {
		color: var(--danger);
	}

	b.success {
		color: var(--success);
	}

	b.amber {
		color: var(--amber);
	}

}

.name-grupo {
	color: var(--textMuted);
	font-size: 1.4rem;
	line-height: 2rem
}

.badge-confed {
	background: var(--bgMuted);
	font-weight: var(--semibold);
	padding: .4rem .8rem;
	border-radius: 1.2rem;
	font-size: 1.2rem;
	line-height: 1.6rem;
	color: var(--text);

	&.round {
		border-radius: .9rem;
		font-weight: var(--bold);
		width: 2.5rem;
		text-align: center;
		padding: .4rem;
	}
}


.kvar_grid {

	& .k-toolbar {
		.toolbarContainer {
			justify-content: flex-start;
			border-bottom: 0px;
			border-radius: 1.6rem 1.6rem 0 0;
			margin-bottom: 0px;
			color: var(--text);
			font-weight: var(--bold);

			.statevalid {
				margin-left: auto;
				font-weight: var(--regular);
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
			}

		}
	}

	.k-grid-header {
		border-radius: 0;
	}

	.fontMono {
		font-weight: var(--semibold);
	}

	.k-master-row {
		td {
			div {
				font-size: 1.2rem;
				line-height: 1.6rem;

				&.muted {
					color: var(--textMuted);
				}

				&.danger,
				&.muted.danger {
					color: var(--danger);
				}
			}
		}
	}

	tr.amber,
	tr.amber:hover {
		background: rgb(from var(--amber) r g b / 0.08) !important;
	}

	tr.danger,
	tr.danger:hover {
		background: rgb(from var(--danger) r g b / 0.08) !important;
	}
}

.estadoCarga {
	font-weight: var(--semibold);
	color: var(--slate);
	font-size: 1.2rem;
	line-height: 1.6rem;

	&.success {
		color: var(--success);
	}

	&.amber {
		color: var(--amber);
	}

	i {
		position: relative;
		top: 1px;
	}

}

/* ===================================== */
/* FORMULARIOS GENERAL */
/* ===================================== */
*:has([required]):has(> .form-label) {
	>.form-label {
		&:after {
			content: ' *';
		}
	}
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: none;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

.formGroup {
	position: relative;
	margin-bottom: 2rem;

	span.error {
		color: var(--danger);
		font-size: 1.2rem;
	}

	label {
		font-weight: var(--semibold);
		font-size: 1.4rem;
		line-height: 2rem;
		margin-bottom: .6rem;
		color: var(--text);
		display: block;

		span {
			color: var(--danger);
		}

		small {
			display: block;
			font-size: 1.2rem;
			line-height: 1.2rem;
			margin-top: .4rem;
			margin-bottom: 1.2rem;
			color: var(--textMuted);
			font-weight: var(--regular);
		}
	}



	input {
		height: 100%;
		min-height: 42px;
		border-radius: 1.6rem;
		width: 100%;
		border: 1px solid var(--border);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
		padding: 0 1.2rem 0 1.2rem;
		box-shadow: none;
		background: #ffffff;
		transition: var(--transition2);

		&:hover {
			box-shadow: 0 0 0 1px rgba(30, 58, 95, .15);
		}

		&:focus {
			outline: none;
			border-color: var(--color1);
			box-shadow: 0 0 0 2px var(--color1);
		}

		&[readonly],
		&:disabled {
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			cursor: default;
			caret-color: transparent;
		}

		&[readonly]::selection,
		&:disabled::selection {
			background: transparent;
		}

	}

	.icoinput {
		position: relative;

		i {
			position: absolute;
			color: var(--textMuted);
			top: 1.6rem;
			left: 1.3rem;
			font-size: 1.2rem;
		}

		input {
			padding-left: 3.6rem;
		}
	}

	.spassword {
		position: relative;

		.btn_eye {
			position: absolute;
			color: var(--textMuted);
			top: 1.2rem;
			right: 1.3rem;
			width: 2rem;
			height: 2rem;
			line-height: 2rem;
			text-align: center;
			background: transparent;
			border: 0;

			i {
				position: relative;
				top: auto;
				left: auto;
				font-size: 1.4rem;
			}

			input {
				padding-right: 3.6rem;
			}
		}
	}

	&.otp-container {
		gap: 1rem;

		input {
			min-height: 56px;
			text-align: center;
			font-size: 1.8rem;
			font-weight: var(--bold);
		}

		&.has-error input {
			background: rgb(from var(--danger) r g b / .1);
			border: 1px solid rgb(from var(--danger) r g b / .5);
			box-shadow: 0 0 0 1px rgb(from var(--danger) r g b / .5);
		}


	}
}

.form-check {

	label {
		color: var(--textMuted);

		a,
		.high_ {
			color: var(--color1);
			transition: var(--transition);
			font-weight: var(--bold);

			&:hover {
				color: var(--color1Light);
				cursor: pointer;
			}

			&.success {
				color: var(--color1);
			}

			&.danger {
				color: var(--danger);
			}

		}
	}

	.form-check-input {
		width: 1.6rem;
		height: 1.6rem;
		outline: none;
		box-shadow: none;

		&:checked {
			background-color: var(--color1);
			border-color: var(--color1);
		}
	}
}

/* DATOS AYUDA*/
.datoshelp_ {
	background: rgb(from var(--blue) r g b / 0.08);
	padding: 1.6rem;
	margin-top: 2.4rem;
	border-radius: 1.6rem;
	border: 1px solid rgb(from var(--blue) r g b / .1);

	p {
		font-size: 1rem;
		line-height: 1.6rem;
		color: var(--blue);
		font-weight: var(--semibold);
		margin: .5rem 0 .5rem 0;
		display: flex;
		align-items: center;
		gap: .6rem;

		button {
			color: inherit;
			font-size: inherit;
			font-weight: inherit;
			box-shadow: none !important;

			.arrow-collapse {
				transition: transform 0.3s ease;
				font-size: 1.2rem;
			}

			&[aria-expanded="true"] {
				.arrow-collapse {
					transform: rotate(180deg);
				}
			}
		}

	}

	ul {
		gap: .8rem;

		li,
		li.list-group-item {
			border-radius: 1.4rem !important;
			border: 1px solid rgb(from var(--blue) r g b / .2);
			transition: var(--transition2);
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem !important;

			&:hover {
				background: rgb(from var(--blue) r g b / 0.01);
				cursor: pointer;
			}

			&.v2 {
				padding: .5rem .8rem !important;
				border-radius: 1rem !important;
			}

			p,
			em {
				font-size: 1.2rem;
				line-height: 1.6rem;
				font-weight: var(--medium);
				margin: 0;
				color: rgb(from var(--blue) r g b / 1);

				&.text-gray {
					color: var(--textMuted);
				}
			}

			em {
				color: rgb(from var(--blue) r g b / .8);
				font-weight: var(--regular);
				font-style: normal;

				button {
					color: rgb(from var(--blue) r g b / .8);
					border: 0px;
					background: transparent;
				}
			}
		}

	}

	.mtitle {
		position: relative;
		text-transform: uppercase;
		font-weight: var(--bold);
		font-size: 1.1rem;
		color: var(--color1Dark);
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid rgb(from var(--blue) r g b / .2);

		button {
			background: rgb(from var(--blue) r g b / .1);
			color: rgb(from var(--blue) r g b / 1);
			transition: var(--transition2);
			font-size: 1.1rem;
			padding: .4rem .5rem;
			font-weight: var(--semibold);
			border-radius: 6px;
			border: 0;
			display: flex;
			align-items: center;
			gap: .3rem;

			&:hover {
				background: rgb(from var(--blue) r g b / .15);
			}
		}

	}

}

.frlink {
	font-size: 1.2rem;
	line-height: 2rem;
	color: var(--textMuted);
	text-align: center;
	margin-top: 2rem;

	&.v2 {
		font-size: 1.4rem;
	}

	a,
	button {
		font-weight: var(--bold);
		color: var(--color1);
		transition: var(--transition);
		background: transparent;
		border: 0px;

		&:hover {
			color: var(--color1Light);
			cursor: pointer;
		}
	}
}

/*tabs login*/
.options_content {
	border-radius: 2rem 2rem 0 0;
	border: 1px solid var(--border);
	border-bottom: 0px;
	overflow: hidden;

	.nav-link {
		flex: 1;
		width: 100%;
		border: 0px;
		position: relative;
		font-weight: var(--medium);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--text);
		padding: 1.6rem;
		transition: var(--transition2);

		&::after {
			position: absolute;
			width: 0%;
			height: 3px;
			content: "";
			display: block;
			background: var(--color1);
			bottom: 0;
			transition: var(--transition2);
			margin: auto;
			left: 0;
			right: 0;
		}

		&.active {
			font-weight: var(--semibold);
			color: var(--color1);

			&.active::after {
				width: 100%;
			}
		}

		&:hover {
			cursor: pointer;
		}

	}
}

.tabl_content {
	.tile {
		font-size: 2rem;
		line-height: 2.8rem;
		color: var(--text);
		font-weight: var(--bold);
	}

	.subt {
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--textMuted);
		margin-top: .8rem;
		margin-bottom: 3.2rem;

		.recet {
			font-weight: var(--bold);
			color: var(--text);
			display: block;
		}
	}

	.withicon {
		display: flex;
		gap: 1rem;
		margin-bottom: 2.4rem;

		i {
			background: rgb(from var(--amber) r g b / 0.08);
			color: var(--amber);
			border-radius: 1.2rem;
			width: 3.2rem;
			height: 3.2rem;
			line-height: 3.2rem;
			text-align: center;
		}

		small {
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--textMuted);
		}

		.tile {
			margin-bottom: 0;
			line-height: 2rem;
		}
	}
}

.messagelog {
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;

	i {
		border-radius: 9999px;
		width: 6.4rem;
		height: 6.4rem;
		margin: auto;
		margin-bottom: 1.6rem;
		font-size: 2.4rem;
		border: 2px solid rgb(from var(--success2) r g b / 0.08);
		background: rgb(from var(--success2) r g b / 0.08);
		color: var(--success2);
	}

	h1 {
		font-size: 1.8rem;
		line-height: 2.8rem;
		color: var(--text);
		font-weight: var(--bold);
		margin-bottom: .8rem;
	}

	p {
		font-size: 1.4rem;
		line-height: 1.6rem;
		color: var(--textMuted);
		margin-bottom: 2.4rem;
	}

}


/* TOASTIFY */
.toastify {
	border-radius: 1rem;
	padding: 1.4rem;

	.toast_ {
		display: flex;
		gap: .8rem;
		align-items: self-start;

		i {
			position: relative;
			top: 4px;
		}

		p {
			margin: 0;
			font-size: 1.2rem;
		}
	}

	&.danger {
		background: oklch(from var(--danger) 1 .1 h);
		box-shadow: 0 3px 6px -1px rgb(from var(--danger) r g b / .1), 0 20px 36px -20px rgb(from var(--danger) r g b / .5);
		color: var(--danger);
	}

	&.success {
		background: oklch(from var(--success2) 1 .1 h);
		box-shadow: 0 3px 6px -1px rgb(from var(--success2) r g b / .1), 0 20px 36px -20px rgb(from var(--success2) r g b / .5);
		color: var(--success);
	}
}

/*HERO*/
.infologin,
.editorlogin_ {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0%;

	.badge,
	em {
		border-radius: 9999px;
		gap: .5rem;
		align-items: center;
		display: inline-flex;
		font-size: 1.2rem;
		line-height: 1.6rem;
		padding: .6rem 1.2rem;
		font-weight: var(--semibold);
		background: rgb(255 255 255 / 10%);
		border: 1px solid rgb(255 255 255 / 20%);
		width: -moz-fit-content;
		width: fit-content;
		margin-bottom: 3.6rem;
		color: #ffffff;
		font-style: normal
	}

	h1 {
		font-size: 3rem;
		line-height: 1;
		font-weight: var(--extrabold);
		color: #ffffff;
		margin-bottom: 1.6rem;
		text-align: center;

		b {
			font-weight: var(--extrabold);
			color: var(--success2);
		}
	}

	p {
		position: relative;
		max-width: 450px;
		color: #ffffff;
		font-size: 1.4rem;
		line-height: 1.8rem;
		font-weight: var(--light);
		text-align: center;
		margin-top: 0;
		margin-bottom: 3.2rem;
	}

	ul {
		color: #ffffff;
		padding: 0;
		list-style: none;
		margin: 0;

		li {
			margin-bottom: 1.2rem;
			font-size: 1.4rem;
			line-height: 2rem;

			img {
				margin-right: 5px;
			}

			i {
				width: 3.2rem;
				height: 3.2rem;
				line-height: 3.2rem;
				border-radius: 1.2rem;
				margin-right: 1.2rem;
				;
				text-align: center;
				color: var(--success2);
				background: rgb(from var(--success2) r g b / 0.08);
			}
		}

	}
}

.editorlogin_ {
	margin: 0;
	justify-content: flex-start;
	align-items: flex-start;

	h1 {
		text-align: unset;
	}

	p {
		text-align: unset;
	}

}

.footlogin {
	text-align: center;
	margin-top: 1rem;

	p {
		font-size: 1.2rem;
		line-height: 1.6rem;
		margin: 0;
		color: rgb(255 255 255 / 50%);
	}
}

/* ===================================== */
/* MODAL LOGIN */
/* ===================================== */
.modalw_ {
	.modal-dialog {
		.modal-content {
			font-family: var(--font1);
			box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
			border-radius: 2rem;
			border: 0;

			.modal-header {
				background: transparent;
				color: var(--text);
				padding: 2rem 2.4rem;
				border-color: var(--border);
				align-items: center;
				justify-content: space-between;

				.close {
					width: 24px;
					height: 24px;
					line-height: 28px;
					color: var(--text);
					transition: var(--transition2);
					border: 0px;
					border-radius: 6px;
				}

				h1 {
					font-size: 1.4rem;
					line-height: 2rem;
					font-weight: var(--bold);
					color: var(--text);
					margin: 0;
				}
			}

			.modal-body {
				.modaleditor_ {
					iframe {
						width: 100%;
						max-width: 100%;
						height: 60vh;
						min-height: 350px;
						border: none;
						display: block;
					}
				}
			}

			.modal-footer {
				position: -webkit-sticky;
				position: sticky;
				bottom: 0;
				z-index: 99;
				background-color: inherit;
				border-color: var(--border);
				border-radius: 0 0 2rem 2rem;
				padding: 1.6rem;
				gap: .8rem;
				justify-content: center;

				h6 {
					font-size: 1.2rem;
					line-height: 2rem;
					font-weight: var(--semibold);
					color: var(--text);
					margin: 0;
					margin-right: 3px;

					width: 100%;
					text-align: center;
				}

				button {
					i {
						font-size: 1.4rem;
					}
				}
			}
		}
	}
}


/* ===================================== */
/* VISTA LANDING */
/* ===================================== */
.vlanding_ {
	padding: 0;
}

.mx-land {
	margin: auto;
}

.herotext_ {
	background: var(--color1Dark);
	background-image: linear-gradient(to bottom right, var(--color1), var(--color1Light), var(--color1Dark));
	padding: 5rem 0;

	#navbar1 {
		background: transparent;
		height: auto;
		padding: 0rem 0 4rem;

		& .sm-brand {
			& a {
				flex-wrap: wrap;
				justify-content: center;

				img {
					height: 60px;
				}

				& .title {
					p {
						font-size: 2rem;

						&.small {
							font-size: 1.4rem;
							line-height: 1.6rem;
							text-wrap: auto;
						}
					}
				}
			}
		}
	}

.infologin {
	align-items: center;
	max-width: 640px;
	margin: 0 auto;

	h1 {
			font-size: 3.6rem;
			line-height: 4rem;
			text-align: center;

			b {
				display: inline;
			}
		}

		p {
			text-align: center;

			&.sm {
				font-size: 1.4rem;
				line-height: 1.625;
				max-width: 440px;
				margin: 0;
				opacity: .8;
			}
		}

	}

}

.razzi_,
.infologin .razzi_ {
	flex: 1 1 0;
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 1.6rem;
	background-color: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 15%);
	border-radius: 1.6rem;
	text-align: center;

	span {
		font-weight: var(--extrabold);
		font-size: 2.4rem;
		line-height: 2.4rem;
		color: #ffffff;
		margin-bottom: .5rem;
	}

	h2 {
		text-transform: uppercase;
		font-weight: var(--bold);
		font-size: 1.4rem;
		line-height: 1.6rem;
		color: var(--success2);
		margin: 0;
	}

	p {
		margin: 0;
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
}

.carde_ {
	background: #ffffff;
	margin-top: 2.6rem;
	border-radius: 1.6rem;
	border: 1px solid var(--border);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

	.ehead_ {
		padding: 2rem 2rem;

		.title_ {
			margin: 0;
			gap: 1rem;

			.icon_ {
				width: 3.2rem;
				height: 3.2rem;
				border-radius: 1.2rem;

				i {
					font-size: 1.2rem;
				}
			}

			&.v2 {
				.icon_ {
					i {
						font-size: 1.4rem;
					}
				}

			}

			.info_ {
				h1 {
					font-size: 1.6rem;
					line-height: 1.8rem;
					margin: 0;
				}

				p {
					font-size: 1.2rem;
					line-height: 1.6rem;
				}
			}
		}
	}

	&.nobg {
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.footlogin {
		margin-top: 2rem;

		p {
			color: var(--textMuted);
			display: block;
			text-align: center;
		}
	}

}

.ress_ {
	padding: 1.6rem 2rem;
	display: flex;
	gap: 1.6rem;
	border-top: 1px solid var(--border);

	i {
		background-color: rgb(from var(--currentColor) r g b / 10%);
		color: var(--currentColor);
		border-radius: 1.2rem;
		width: 3.6rem;
		height: 3.6rem;
		min-width: 3.6rem;
	}

	&:nth-child(1n) i {
		--currentColor: var(--success2);
	}

	&:nth-child(2n) i {
		--currentColor: var(--amber);
	}

	&:nth-child(3n) i {
		--currentColor: var(--blue);
	}

	&:nth-child(4n) i {
		--currentColor: var(--indigo);
	}

	&:nth-child(5n) i {
		--currentColor: var(--color1);
	}

	&:nth-child(6n) i {
		--currentColor: var(--danger);
	}

	h1 {
		font-size: 1.4rem;
		line-height: 2em;
		font-weight: var(--semibold);
		color: var(--text);
		margin-bottom: .2rem;
	}

	p {
		font-size: 1.2rem;
		line-height: 1.6em;
		font-weight: var(--regular);
		color: var(--textMuted);
		margin: 0;
	}
}

.resbuton_ {
	border: 0px;
	border-top: 1px solid var(--border);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 1.4rem;
	line-height: 2em;
	background: transparent;
	font-weight: var(--semibold);
	color: var(--color1);
	transition: var(--transition2);

	&:hover {
		background: var(--background);
	}
}

.pazzi_ {
	flex: 1 1 0;
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.6rem 1.2rem;
	border-radius: 1.6rem;

	--currentColor: var(--currentColor);
	background-color: rgb(from var(--currentColor) r g b / 8%);

	&:nth-child(1n) {
		--currentColor: var(--success2);
	}

	&:nth-child(2n) {
		--currentColor: var(--blue);
	}

	&:nth-child(3n) {
		--currentColor: var(--textMuted);
	}

	span {
		color: var(--currentColor);
		font-weight: var(--extrabold);
		font-size: 2.4rem;
		line-height: 3rem;
		margin-bottom: 0;
	}

	h2 {
		color: var(--currentColor);
		font-weight: var(--bold);
		font-size: 1.2rem;
		line-height: 1.2rem;
		margin: 0;
		margin-top: .4rem;
	}

	p {
		color: var(--currentColor);
		margin: 0;
		margin-top: .4rem;
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
}

.condgrop_ {
	position: relative;

	.form-check {
		padding: 1.6rem 1.2rem;
		padding-left: 4rem;
		margin-bottom: 0;
		border-top: 1px solid var(--border);
		transition: var(--transition2);

		&:hover {
			background: rgb(from var(--bgMuted) r g b / 60%);
			cursor: pointer;
		}

		.form-check-input {
			width: 2rem;
			height: 2rem;
			border-width: 2px;
			border-radius: .6rem;
			cursor: pointer;
		}

		label {
			font-size: 1.4rem;
			line-height: 2.2rem;
			color: var(--text);
			margin-left: 1rem;
			cursor: pointer;
		}

	}
}

.btnminline_ {
	white-space: nowrap;
	font-size: 1.2rem;
	line-height: 1.6rem;
	font-weight: var(--semibold);
	border: 0;
	background: transparent;
	color: var(--color1);
	cursor: pointer;

	&.success {
		color: var(--success);
	}

	i {
		margin: 2px 5px 2px 2px;
		position: relative;
		top: 2px;
	}

}


/* ===================================== */
/* VISTA match predictions PARTIDOS */
/* ===================================== */
.k-listview-content {
	gap: 16px;
}

.contestInfo {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: .8rem;

	.status {
		padding: .8rem 1rem;
		white-space: nowrap;

	}
}

.datamatch_ {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: #ffffff;
	padding: 2rem;
	border: 1px solid var(--border);
	border-radius: 1.6rem;
	gap: 1.6rem;
	height: 100%;

	.user {
		display: flex;
		align-items: center;
		gap: 1rem;
		flex: 1 1 180px;

		.userInitials {
			width: 4rem;
			height: 4rem;
			border-radius: 9999px;
			font-size: 1.4rem;
			line-height: 4rem;
			font-weight: var(--bold);
			background: var(--color1);
			color: #ffffff;
			text-align: center;
			display: block;
		}

		.userData {
			.userName {
				font-size: 1.8rem;
				line-height: 2rem;
				font-weight: var(--bold);
				color: var(--text);
			}

			.userForecasts {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
			}
		}

	}

	.progressContest {
		width: 320px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 0;
		flex: 1 1 calc(50% - .8rem);

		.progressTitle {
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--textMuted);
		}

		.progressPercentage {
			font-weight: var(--bold);
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--color1);

		}

		.progress {
			width: 100%;
			height: 7px;
			background-color: var(--bgMuted);
			border-radius: 10px;
			overflow: hidden;

			.progress-bar {
				height: 100%;
				background-color: var(--color1);
				transition: width 0.6s ease;
			}
		}
	}

	.statisticsContainer {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
		flex: 1 1 100%;

		.statistic {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 1rem .6rem;
			background-color: #ffffff;
			border-radius: 1.2rem;
			text-align: center;
			width: 100%;

			--currentColor: var(--currentColor);
			--currentColor: var(--color1);
			border: 1px solid rgb(from var(--currentColor) r g b / 12%);
			background: rgb(from var(--currentColor) r g b / 5%);

			i {
				font-size: 1rem;
				margin-bottom: 2px;
				color: var(--currentColor);
			}

			b {
				display: block;
				font-size: 1.9rem;
				font-weight: var(--extrabold);
				color: var(--currentColor);
			}

			p {
				font-size: 1rem;
				color: var(--text);
				margin: 0;
			}

			&.amber {
				--currentColor: var(--amber);
			}

			&.success {
				--currentColor: var(--success);
			}

			&.blue {
				--currentColor: var(--blue);
			}
		}

	}

	&.dark {
		background: var(--color1);

		.statisticsContainer {
			grid-template-columns: repeat(2, 1fr)
		}

		.userInitials {
			background-color: rgb(from #ffffff r g b / 10%);
		}

		.userData {
			.userName {
				color: #ffffff;
			}

			.userForecasts {
				color: var(--color1-200);
			}
		}

		.statisticsContainer {
			.statistic {
				border-right: 1px solid rgb(255 255 255 / 25%);
				border-radius: 0;
				padding: 0rem 1.5rem 0rem 0rem;

				&:last-child {
					border-right: 0px;
					padding: 0;
				}

				b {
					font-weight: var(--extrabold);
					font-size: 2.4rem;
					line-height: 3.2rem;
					color: #ffffff;
				}

				p {
					font-size: 1.2rem;
					color: var(--color1-200);
				}
			}
		}


	}

}


.boxpartidos_ {
	overflow: hidden;

	::-webkit-scrollbar {
		height: 6px;
	}

	::-webkit-scrollbar-track {
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		cursor: grab;
	}

	nav {
		overflow-x: auto;
		margin-bottom: 2.5rem;
	}

	.navline_ {
		min-width: -moz-max-content;
		min-width: max-content;
		margin-bottom: .7rem;
		margin-bottom: .7rem;
		border: 1px solid var(--border);
		background: #ffffff;

		& .nav-link {
			padding: 1rem;
			gap: .2rem;

			span {
				display: inline;
				transition: var(--transition2);

				span:nth-of-type(1) {
					font-weight: var(--bold);
					font-size: 1.1rem;
					border-radius: 50px;
					background: rgb(from var(--slate) r g b / .1);
					display: inline-block;
					width: 2rem;
					margin: 0 3px;
				}

				span:nth-of-type(2) {
					background: rgb(from var(--success2) r g b / .1);
					color: var(--success);
					border-radius: 50px;
					font-size: 1.1rem;
					padding: .55rem 1rem
				}

			}

			&:hover {
				background: rgb(from var(--bgMuted) r g b / .7);
			}

			&.active {
				background: var(--color1);
				color: #ffffff;

				span {
					span:nth-of-type(1) {
						background: rgb(255 255 255 / 20%);
					}

					span:nth-of-type(2) {
						background: rgb(from var(--success2) r g b / 1);
						color: #fff;
					}

				}

			}

		}
	}
}

.cntPartidos {
	background: transparent;
	border: 0;

	.k-listview-item {
		background: rgb(255 255 255 / 0%);
	}

	.card {
		height: 100%;
		border: 1px solid var(--border);
		border-radius: 1.6rem;
		overflow: hidden;
		transition: var(--transition2);
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .07), 0 1px 2px -1px rgba(0, 0, 0, .04);

		&:hover {
			box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
		}
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .8rem 1.6rem;
		border-bottom: 1px solid var(--border);
		background: var(--bgMuted);

		flex-direction: column;
		gap: 1rem;

		p {
			font-weight: 700;
			font-size: 1.1rem;
			text-transform: uppercase;
			color: var(--slate);
			margin: 0;

			.fi.fi-rr-trophy {
				font-size: 1rem;
				margin-right: .5rem;
			}
		}

		.status {
			padding: .3rem .8rem;
			background-color: rgb(255 255 255 / 60%);

			i {
				font-size: 1rem;
			}
		}

	}

	.card-body {
		padding: 2rem 1.6rem;
	}

	.resultados {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		align-items: center;

		.equipo {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			i {
				font-size: 3rem;
				border-radius: .8rem;
			}

			.nombre {
				font-weight: var(--bold);
				margin-top: 1rem;
				font-size: clamp(1.2rem, 1.5vw, 1.4rem);
				line-height: 1.25;
				color: var(--text);
			}

			.grupo {
				font-size: 1rem;
				color: var(--textMuted);
				padding: .1rem .8rem;
				margin-top: .8rem;
				border-radius: 9999px;
				background: var(--bgMuted);
			}

			.tipo {
				font-size: 1rem;
				color: var(--textMuted);
				margin-top: .8rem;
				font-weight: var(--semibold);
			}
		}

		.marcador {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: .5rem;

			span {
				font-size: 2.4rem;
				font-weight: var(--medium);
				color: var(--textMuted);
				text-align: center;

				&.status {
					font-size: 1rem;
					font-weight: var(--semibold);
					--currentColor: var(--blue);
					color: var(--text);
				}
			}

			.resultado {
				label {
					margin: auto;
					text-align: center;
					display: block;
					color: var(--textMuted);
					font-size: 1rem;
					font-weight: var(--semibold);
					opacity: .7;
				}
			}

		}

		.versus {
			font-size: 2.4rem;
			color: var(--textMuted);
			line-height: 2.8rem;
			font-weight: var(--medium);
		}

		.datos {
			grid-column: span 3;
			text-align: center;
			margin-top: 1rem;
			padding-top: 1rem;

			p {
				margin: 0;
				margin-top: .5rem;
				text-align: center;
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);

				i {
					font-size: 1rem;
					margin-right: .5rem;
				}

			}

			p:last-of-type {
				font-size: 1.1rem;
			}

			&.bg_slate {
				background: var(--background);
				padding: .8rem 1.2rem;
				border-radius: 1.2rem;
				margin-top: 1.4rem;

				p {
					margin: 0;
					color: var(--textMuted);
					opacity: .7;
				}

				span {
					font-size: 1.2rem;
					line-height: 1.6rem;
				}
			}

		}
	}

	.card-footer {
		padding: 0;
		border: 0;
		border-top: 1px solid var(--border);
		background: transparent;
	}

	.pronosticoActual {
		padding: 1.2rem 1.6rem 1.6rem;

		.pronostico {
			display: flex;
			justify-content: space-between;
			align-items: center;

			p {
				text-transform: uppercase;
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
				font-weight: var(--semibold);
				margin: 0;
			}

			.status {
				&.success {
					font-weight: var(--bold);
				}

				i {
					font-size: 1rem;
				}
			}

			span.amber {
				color: var(--amber);
			}

		}

		button:not(.btn_simpleDark) {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1.2rem;
			background: var(--bgMuted);
			padding: 1.2rem 1.6rem;
			border-radius: 1.2rem;
			width: 100%;
			border: 0px;
			margin-top: 1.2rem;
			color: var(--text);

			b {
				font-size: 1.6rem;
				line-height: 2.4rem;
				color: var(--text);
				font-weight: var(--bold);
			}

			span {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
				font-weight: var(--regular);
				margin-left: .8rem;
			}

			&.editarPronostico {
				background: transparent;
				width: -moz-fit-content;
				width: fit-content;
				gap: .4rem;
				padding: 0;
				margin-top: 0;

				i {
					font-size: 1rem;
					color: var(--color1);
				}

				span {
					font-size: 1.2rem;
					line-height: 1.6rem;
					font-weight: var(--semibold);
					margin: 0;
					color: var(--color1);
				}
			}

			&.registrarPronostico {
				font-size: 1.4rem;
				line-height: 2rem;
				gap: .5rem;
				border: 2px dashed rgb(from var(--color1) r g b / .2);
				padding: 1.4rem 1.6rem;
				margin-top: .5rem;
				background: transparent;
				transition: var(--transition2);

				&:hover {
					border: 2px dashed rgb(from var(--color1) r g b / .5);
					background: rgb(from var(--color1-200) r g b / 0.2);
				}

				&:active {
					transform: scale(0.98);
				}

				i {
					font-size: 1.2rem;
					color: var(--color1);
				}

				span {
					font-size: 1.4rem;
					line-height: 2rem;
					font-weight: var(--semibold);
					margin: 0;
					color: var(--color1);
				}

			}

			&.amber {
				background: rgb(from var(--amber) r g b / 0.1);
				color: var(--amber);

				b {
					color: var(--amber);
				}
			}

		}


	}

	.nuevoPronostico {
		padding: 1.2rem 1.6rem 1.2rem 1.6rem;

		p {
			text-transform: uppercase;
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--textMuted);
			font-weight: var(--semibold);
			margin: 0;
		}

		form {
			margin-top: 1.2rem;

			.parteeditar {
				display: flex;
				align-items: flex-end;
				gap: 10px;
				width: 100%;
				margin-bottom: 1.2rem;

				.coleq_ {
					flex: 1 1 0;
					display: flex;
					flex-direction: column;
					gap: 5px;

					label {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						font-size: 1.1rem;
						line-height: 1.4rem;
						color: var(--textMuted);
						font-weight: var(--medium);
						text-align: center;
						margin-bottom: .3rem;
					}

					input {
						width: 100%;
						text-align: center;
						padding: 1.2rem .8rem;
						border-radius: 1.4rem;
						border: 1px solid var(--border);

						font-size: 2rem;
						line-height: 2.8rem;
						color: var(--text);
						font-weight: var(--bold);
						transition: var(--transition2);

						&:focus {
							outline: 2px solid var(--color1);
							outline-offset: 0px;
						}

					}
				}

				.cole_auto {
					flex: 0 0 auto;
					padding-bottom: 1.8rem;

					span {
						font-size: 1.5rem;
						font-weight: var(--bold);
						color: var(--textMuted);
					}
				}

			}


			.form-text {
				font-size: 1rem;
				line-height: 1.2rem;
				color: var(--textMuted);
				font-weight: var(--regular);
				text-transform: none;
				margin: 1rem;
				text-align: center;
			}

			.accionesPrediccion {
				display: flex;
				align-items: center;
				gap: 1rem;
				width: 100%;

				.guardarPrediccion,
				.cancelarPrediccion {
					display: flex;
					align-items: center;
					justify-content: center;
					border: 0;
					cursor: pointer;
				}

				&:active {
					transform: scale(0.98);
				}

				.guardarPrediccion {
					flex: 1 1 0;
					gap: .6rem;
					border-radius: 1.2rem;
					padding: 1rem;
					background: var(--color1);
					font-size: 1.4rem;
					line-height: 2rem;
					font-weight: var(--semibold);
					transition: var(--transition2);
					color: #ffffff;

					&:hover {
						opacity: 0.9;
					}
				}

				.cancelarPrediccion {
					flex: 0 0 auto;
					border-radius: 1.2rem;
					text-align: center;
					font-size: 1.6rem;
					line-height: 1.6rem;
					color: var(--textMuted);
					font-weight: var(--semibold);
					background: var(--bgMuted);
					padding: 1.2rem 1.6rem;
				}
			}

		}

	}

	.high_ {
		border: 1px solid rgb(from var(--amber) r g b / 0.3);

		.card-header {
			border-bottom: 1px solid rgb(from var(--amber) r g b / 0.2);
			background: rgb(from var(--amber) r g b / 0.1);

			p {
				color: var(--amber);
			}
		}

		.fi.fi-rr-trophy {
			font-size: 2.5rem;
			color: var(--amber);
		}

	}

	.alert {
		margin-top: 1.6rem;

		.datacol_ {
			background: transparent;
			border: 0px;
			padding: 0;

			p {
				margin: 0;
			}

			&.success p,
			&.success p small {
				color: var(--success);
			}

			&.blue p,
			&.blue p small {
				color: var(--blue);
			}

			&.slate p {
				color: var(--slate);
			}

		}

	}

	.vgroup_pronost {
		padding: 0rem 1.2rem;
		align-items: center;
		display: flex;

		button {
			&.amber {
				width: -moz-fit-content;
				width: fit-content;
				margin-left: auto;
				margin-right: auto;

				span {
					color: var(--amber);
					margin: 0;
				}
			}
		}

		.btn_simpleDark {
			margin: auto;
			margin-top: 1.4rem;
		}

	}

	.grupoResultado {
		align-items: center;
		margin-top: 1rem;
		justify-content: center;
		display: flex;
		gap: .5rem;

		input
{
	text-align: center;
	width: clamp(4rem, 0.5vw, 4.8rem);
	height: clamp(4rem, 0.5vw, 4.4rem);
	border-radius: 1.4rem;
	border: 2px solid var(--border);
	font-size: 2rem;
	line-height: 2.8rem;
	color: var(--text);
	font-weight: var(--extrabold);
	transition: var(--transition2);
	&:disabled {
				font-size: 1.8rem;
				color: var(--textMuted);
				background: var(--background);
				border: 2px solid var(--background);
			}

			&:focus {
				outline: 2px solid var(--color1);
				outline-offset: 0
			}
		}

		button {
			border-radius: 1.2rem;
			text-align: center;
			font-size: 1.8rem;
			color: var(--textMuted);
			font-weight: var(--semibold);
			background: var(--bgMuted);
			padding: 0.7rem 1.1rem 1.1rem 1.1rem;
			line-height: 1rem;
			border: 0;

			&:disabled {
				opacity: .5;
				pointer-events: none;
			}

		}

		@media (max-width: 576px) {
			button {
				display: none;
			}

		}
	}

	.contenedorBotones {
		flex-direction: column;
		align-items: stretch;

		display: flex;
		gap: 1.2rem;
		width: 100%;
		margin-top: 2rem;
		margin-bottom: 0rem;

		.guardarResultado,
		.mostrarPuntos {
			width: 100%;
			flex: none;
		}
	}

	.btn_minexpand {
		border: 0;
		padding: .4rem;
		border-radius: .6rem;
		background: transparent;
		color: var(--textMuted);
		transition: var(--transition2);
		max-height: 22px;
		top: 3px;
		position: relative;
		transform: rotate(180deg);

		&.collapsed {
			transform: rotate(0deg);
		}

		&:hover {
			background-color: rgb(255 255 255 / 60%);
		}
	}

	.bxcollapse_,
	.bxcollapse_.card-footer {
		padding: 1.2rem 1.6rem 1.6rem;

		p {
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--textMuted);
			margin: 0;
			margin-top: 0.8rem;

			i {
				font-size: 1rem;
			}
		}
	}

	.tablaPuntos {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		margin-top: 1.6rem;
		border-radius: 1.6rem;
		border: 1px solid var(--border);
		display: flex;
		flex-direction: column;
		overflow: hidden;

		thead {
			background: var(--bgMuted);
			display: table;
			width: 100%;
			table-layout: fixed;

			tr {
				display: flex;
				align-items: center;
				padding-bottom: 10px;
				flex-direction: column;


				th {
					.tableTitle {
						display: flex;
						align-items: center;
						padding: 1rem 1.6rem;
						gap: 1rem;

						i {
							font-size: 1.2rem;
						}

						span {
							text-transform: uppercase;
							letter-spacing: .03em;
							font-weight: var(--bold);
							font-size: 1.2rem;
							line-height: 1.6rem;
						}
					}

					.resultados {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						gap: 1rem;
						padding-right: 1.6rem;

						p {
							display: flex;
							align-items: center;
							gap: 0.4rem;
							font-size: 1rem;
							font-weight: var(--semibold);
							margin: 0;
							flex-direction: column;

							&.success {
								color: var(--success2);
							}

							&.blue {
								color: var(--blue);
							}

							&.danger {
								color: var(--danger);
							}

							&.slate {
								color: var(--slate);
							}
						}
					}
				}
			}
		}

		tbody {
			display: block;
			max-height: 200px;
			overflow-y: auto;
			width: 100%;

			tr {
				display: table;
				width: 100%;
				table-layout: fixed;
				border-top: 1px solid var(--border);
				transition: var(--transition2);

				&:hover {
					background: rgb(from var(--background) r g b / 1);
				}

				td {
					.participante {
						display: flex;
						align-items: center;
						gap: 1rem;
						padding: 0.8rem 1.6rem;

						.iniciales {
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 2.8rem;
							width: 2.8rem;
							height: 2.8rem;
							border-radius: 50%;
							background: var(--color1);
							color: #fff;
							font-weight: var(--bold);
							font-size: 1rem;
						}

						.nombre {
							p {
								margin: 0;
								font-size: 1.2rem;
								line-height: 1.6rem;
								font-weight: var(--semibold);
								color: var(--text);
							}

							small {
								display: block;
								font-size: 1rem;
								color: var(--textMuted);
							}
						}
					}

					.status {
						display: inline-block;
						font-size: 1.1rem;
						padding: .1rem .6rem .1rem .6rem;
					}

					.puntos {
						display: inline-block;
						min-width: 32px;
						font-weight: var(--extrabold);
						font-size: 1.4rem;
						line-height: 2rem;
						color: var(--color1);
					}

					&:last-child {
						text-align: right;
						padding-right: 1.6rem;
					}
				}
			}
		}
	}
}


/* ===================================== */
/* VISTA scoring rules REGLAS */
/* ===================================== */
.herocolor_ {
	background-color: var(--color1);
	border-radius: 1.2rem;
	padding: 2rem 2rem 1.2rem 2rem;

	.title_ {
		margin-bottom: 1rem;

		.icon_ {
			background: rgb(255 255 255 / 10%);
		}

		.info_ {
			h1 {
				color: #fff;
			}

			p {
				color: var(--color1-200);
			}
		}
	}

	.row .col {
		width: auto;
	}

	.datacol_ {
		width: 100px;
		border: 0px;
		padding: 1.2rem;
		background: rgb(from var(--slate) r g b / .2);

		&.blue {
			background: rgb(from var(--blue) r g b / .3);
		}

		&.success {
			background: rgb(from var(--success) r g b / .2);
		}

		&.amber {
			background: rgb(from var(--amber) r g b / .2);
		}

		p {
			em {
				color: #ffffff;
				margin-bottom: .3rem;
				display: block;
			}

			small {
				color: var(--color1-200);
			}
		}

	}

}


/* ===================================== */
/* VISTA participant home HOME USUARIO */
/* ===================================== */
.paneldato_ {
	margin-bottom: 2rem;

	.cadol_ {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		position: relative;
		padding: 1.6rem;
		border-radius: 2rem;
		border: 1px solid var(--border);
		height: 100%;
		background: #fff;

		i {
			width: 3.8rem;
			height: 3.8rem;
			line-height: 3.8rem;
			border-radius: 1.6rem;
			text-align: center;
		}

		h6 {
			margin: 0;
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--color1-200);
		}

		p {
			margin: 0;
			display: flex;
			flex-direction: column;

			em {
				font-size: 2.4rem;
				line-height: 2.4rem;
				color: var(--text);
				font-weight: var(--bold);
				font-style: normal;
			}

			small {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
			}
		}


		&.bg_ {
			background-color: var(--color1);
			overflow: hidden;

			&:after,
			&:before {
				content: "";
				position: absolute;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				background: rgb(from var(--blue) r g b / 15%);
			}

			&:after {
				top: -20px;
				right: -50px;
				animation: pulse 1s infinite;
			}

			&:before {
				top: -60px;
				right: 30px;
				animation: pulse 1.5s infinite;
			}

			p {
				margin-top: 1rem;

				em {
					font-size: 3.6rem;
					line-height: 3.8rem;
					font-weight: var(--extrabold);
					color: #ffffff;

				}

				small {
					color: var(--color1-200);
				}
			}

			small {
				color: var(--success2);
				font-size: 1.2rem;
				line-height: 1.2rem;
			}


		}

		&.amber {
			i {
				background: rgb(from var(--amber) r g b / 8%);
				color: var(--amber);
			}
		}

		&.blue {
			i {
				background: rgb(from var(--blue) r g b / 8%);
				color: var(--blue);
			}
		}
	}
}


.panelprecision_ {
	padding: 2rem;
	border-radius: 2rem;
	border: 1px solid var(--border);
	background: #ffffff;
	margin-bottom: 2.4rem;

	.alert {
		padding: 1.2rem;
		text-align: center;
		border-radius: 1.6rem;
		background: rgb(from var(--currentColor) r g b / 5%);
		color: var(--currentColor);
		border: 1px solid rgb(from var(--currentColor) r g b / 7%);
		--currentColor: var(--text);
	}

	.success {
		--currentColor: var(--success2);
	}

	.blue {
		--currentColor: var(--blue);
	}

	.danger {
		--currentColor: var(--danger);
	}

	h2 {
		font-size: 1.4rem;
		line-height: 1.6rem;
		color: var(--text);
		font-weight: var(--bold);
		margin: 0;
	}

	span {
		margin-left: auto;
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);
	}

	h1 {
		font-size: 2rem;
		line-height: 2.2rem;
		font-weight: var(--extrabold);
	}

	p {
		font-size: 1.2rem;
		line-height: 1rem;
		font-weight: var(--semibold);
		text-transform: uppercase;
		margin: 0;
	}

	small {
		font-size: 1rem;
		line-height: 1.2rem;
	}
}

.progressbox_ {
	padding: 2rem;
	border-radius: 2rem;
	border: 1px solid var(--border);
	background: #ffffff;
	margin-bottom: 2.4rem;

	.progressContest {
		width: 100%;
		margin-bottom: 1.4rem
	}

	h1 {
		font-size: 1.4rem;
		line-height: 1.6rem;
		color: var(--text);
		font-weight: var(--bold);
		margin: 0;
	}

	span {
		margin-left: auto;
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--text);
	}

	h2 {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);
		margin: 0;
		font-weight: var(--regular);
	}

	small {
		margin-left: auto;
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);
		font-weight: var(--regular);
	}
}

.sectionnext_ {
	margin-bottom: 2.4rem;
}

.vtitle {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;

	h1 {
		font-size: 1.6rem;
		line-height: 2.4rem;
		color: var(--text);
		font-weight: var(--bold);
		margin: 0;
	}

	a {
		margin-left: auto;
	}

}

.vbox_ {
	margin-bottom: 2rem;
	padding: 2rem;
	border-radius: 2rem;
	border: 1px solid var(--border);
	background: #fff;

	h1 {
		display: flex;
		align-items: center;
		font-size: 1rem;
		font-weight: var(--medium);
		color: var(--textMuted);
		margin-bottom: 1.5rem;
		text-transform: uppercase;

		.badge {
			display: inline-flex;
			align-items: center;
			gap: 2px;
			font-size: 1rem;
			padding: .4rem .5rem;
			border-radius: 20px;
			font-weight: var(--semibold);
			text-transform: none;
			margin-left: 5px;

			i {
				font-size: 0.85rem;
			}

			&.amber {
				background-color: rgb(from var(--amber) r g b / 8%);
				color: var(--amber);
				border: 1px solid rgb(from var(--amber) r g b / 10%);
			}
		}
	}

	.card {
		border: 0px;
		background: transparent;

		.resultados {
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			gap: 1rem;
			padding-top: 1.2rem;

			.equipo {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				i[class*="fi-"] {
					font-size: 3.4rem;
					margin-bottom: 1rem;
					border-radius: 0.8rem;
				}

				.nombre {
					font-weight: var(--bold);
					font-size: 1.6rem;
					line-height: 1.6rem;
				}

				.grupo {
					font-size: 1rem;
					color: var(--textMuted);
					margin-top: 2px;
				}
			}

			.marcador {
				flex: 0 0 auto;

				span {
					font-weight: 800;
					font-size: 1.2rem;
					color: var(--textMuted);
					text-transform: uppercase;
				}
			}
		}

		.fecha_ {
			display: flex;
			gap: 1.5rem;
			margin: 1.5rem 0;
			padding: 1rem 0 0;
			border-top: 1px solid var(--border);

			p {
				margin: 0;
				font-size: 1.2rem;
				color: var(--textMuted);
				display: flex;
				align-items: center;
				gap: .8rem;
			}
		}

		.action {
			display: flex;
			justify-content: center;

			.btn_simpleDark {
				width: 100%;
				justify-content: center;
				padding: 12px;
				font-weight: 600;
			}
		}
	}

}

.linkicon_ {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 2rem;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 2rem;
	gap: 1rem;
	transition: var(--transition2);

	>i {
		font-size: 1.9rem;
		color: var(--color1);
		flex: 0 0 auto;
		width: 5rem;
		height: 5rem;
		line-height: 5rem;
		border-radius: 1.2rem;
		background: rgb(from var(--color1) r g b / 5%);
		transition: var(--transition2);
	}

	&.amber i {
		background: rgb(from var(--amber) r g b / 7%);
		color: var(--amber);
	}


	h1 {
		display: flex;
		flex-direction: column;
		margin: 0;
		font-weight: var(--bold);
		font-size: 1.4rem;
		line-height: 1.6rem;
		color: var(--text);

		small {
			font-size: 1.2rem;
			font-weight: var(--regular);
			color: var(--textMuted);
			margin-top: 2px;
		}
	}

	span {
		margin-left: auto;
		font-size: 1.6rem;
		color: var(--textMuted);
		transition: transform 0.2s ease;
	}

	&:hover {
		border: 1px solid rgb(from var(--color1) r g b / 20%);

		i {
			background: rgb(from var(--color1) r g b / 20%);
		}

		span {
			transform: translateX(4px);
			color: var(--color1);
		}
	}

	&.amber:hover {
		border: 1px solid rgb(from var(--amber) r g b / 30%);

		i {
			background: rgb(from var(--amber) r g b / 30%);
		}

		span {
			transform: translateX(4px);
			color: var(--amber);
		}
	}
}

.tabletop_ {
	margin-bottom: 2rem;
	padding: 2rem;
	border-radius: 2rem;
	border: 1px solid var(--border);
	background: #fff;
}

.ranking-list_ {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;

	.tbitem_ {
		display: flex;
		align-items: center;
		padding: 1.2rem;
		gap: 1.2rem;
		border-radius: 1.6rem;
		border: 1px solid var(--background);
		background: var(--background);
		margin-bottom: 1rem;

		&:last-child {
			margin-bottom: 0rem;
		}

		&.tu_ {
			background: transparent;
			border: 1px solid var(--border);
		}

		.numer {
			flex: 0 0 25px;
			font-weight: var(--extrabold);
			color: #fff;
			background: var(--color1);
			width: 2.8rem;
			height: 2.8rem;
			min-width: 2.8rem;
			line-height: 2.8rem;
			border-radius: 50%;
			text-align: center;
		}

		&:nth-child(1) .numer {
			background: #f59e0b;
		}

		&:nth-child(2) .numer {
			background: #94a3b8;
		}

		&:nth-child(3) .numer {
			background: #b45309;
		}

		.initil {
			flex: 0 0 35px;
			height: 3.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--color1);
			background-color: rgb(from var(--color1) r g b / 10%);
			border-radius: 50%;
			font-size: 1.4rem;
			font-weight: var(--extrabold)
		}

		.name {
			flex: 1;
			font-weight: var(--semibold);
			font-size: 1.4rem;
			line-height: 2rem;
			color: var(--text);

			small {
				background-color: rgb(from var(--color1) r g b / 15%);
				color: var(--text);
				font-size: 1rem;
				padding: .2rem .6rem;
				border-radius: 10px;
				margin-left: 6px;
			}
		}

		.points {
			margin-left: auto;
			font-weight: var(--extrabold);
			display: flex;
			align-items: baseline;
			gap: 3px;

			small {
				font-size: 1.1rem;
				font-weight: var(--regular);
				color: var(--textMuted);
			}
		}



	}
}

/* ===================================== */
/* VISTA NOTIFICACIONES */
/* ===================================== */
.manual_,
.k-grid.manual_ {
	margin-bottom: 1.6rem;
	border: 1px solid var(--border);
	background-color: #ffffff;
	border-radius: 1.6rem;

	.toolbar {
		width: 100%;
	}

	.toolbarContainer {
		margin: 0;
		border: 0;
	}

	.filtros,
	.kmodal-form,
	.row {
		width: 100%;
	}

	.filtros {
		padding: 0 1.6rem 1.6rem 1.6rem;
	}

}

.listData {
	margin-bottom: 1.2rem;

	.cantidadNotificaciones {
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--textMuted);
	}

	.detalle {
		font-size: 1.1rem;
		line-height: 1.6rem;
		color: var(--textMuted);
	}
}

.k_listview {
	background: transparent;
	border: 0px;

	.card {
		background: #ffffff;
		border-radius: 2rem;
		padding: 1rem;
		border: 1px solid var(--border);
		transition: var(--transition2);

		@media (min-width: 576px) {

			.view,
			.refresh {
				opacity: 0;
			}

			&:hover {
				box-shadow: 0 4px 8px rgba(from var(--color1) r g b / 10%);

				.view,
				.refresh {
					opacity: 1;
				}

			}
		}

	}

	.notificationData {

		.d-flex {
			flex-wrap: wrap;
			align-items: center;
			gap: 0.5rem;

			.status {
				flex: 0 0 auto;
			}

			.date {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
			}
		}

		.title {
			.name {
				font-size: 1.6rem;
				line-height: 2rem;
				color: var(--text);
				font-weight: var(--semibold);
			}
		}

		.user {
			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--text);
		}

		.means {
			i {
				font-size: 1.2rem;
				color: rgb(from var(--blue) r g b / .5);
			}

			.fi-rr-mobile-button {
				color: rgb(from var(--indigo) r g b / .5);
			}

			span {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
			}
		}

		.content {
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			line-clamp: 1;

			font-size: 1.2rem;
			line-height: 1.6rem;
			color: var(--textMuted);
			margin-top: .6rem;
		}

	}

	.view,
	.refresh {
		display: flex;
		align-items: center;
		border: 0;
		transition: var(--transition2);
		border-radius: 1.2rem;
		padding: .8rem;
		background: transparent;
		color: var(--textMuted);

		&.view {
			&:hover {
				background: var(--bgMuted);
				color: var(--textMuted)
			}
		}

		&.refresh {
			&:hover {
				background: rgb(from var(--blue) r g b / 10%);
				color: rgb(from var(--blue) r g b / 50%)
			}
		}
	}

	.refresh {
		font-size: 1.2rem;
	}
}

/* ===================================== */
/* RESULTADOS Y RANKING */
/* ===================================== */
.navrank_ {
	display: flex;
	width: 100%;
	border-radius: 2rem 2rem 0 0;
	border: 1px solid var(--border);
	border-bottom: 0;
	overflow: hidden;
	padding: 0;
	list-style: none;

	.nav-item {
		flex: 1 1 0;
		display: flex
	}

	.nav-link {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .8rem;
		border: 0;
		position: relative;
		font-weight: var(--semibold);
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--textMuted);
		padding: 1.8rem;
		transition: var(--transition2);
		background: var(--bgMuted);

		&::after {
			position: absolute;
			width: 0;
			height: 3px;
			content: "";
			display: block;
			background: var(--color1);
			bottom: 0;
			transition: var(--transition2);
			margin: auto;
			left: 0;
			right: 0
		}

		&:hover {
			cursor: pointer;
			background-color: rgba(0, 0, 0, .02);
			color: var(--color1);
		}

		&.active {
			font-weight: var(--semibold);
			color: var(--color1);

			&::after {
				width: 100%
			}

			&:hover {
				background-color: #ffffff;
			}
		}


	}
}

.boxrank_ {
	padding: 0 2.4rem 2.4rem 2.4rem;
	border-radius: 0 0 1.6rem 1.6rem;
	background: #fff;
	border: 1px solid var(--border);
}


.suptitle_ {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;

	.icon {
		width: 3.6rem;
		height: 3.6rem;
		border-radius: 9999px;
		font-size: 1.4rem;
		line-height: 3.8rem;
		background: rgb(from var(--color1) r g b / 5%);
		color: rgb(from var(--color1) r g b / 50%);
		text-align: center;
		display: block;

		&.nobg_ {
			background: transparent;
			width: auto;
			height: auto;
			line-height: normal;
			font-size: 1.2rem;
		}
	}

	h1 {
		font-size: 1.4rem;
		line-height: 2rem;
		font-weight: var(--bold);
		color: var(--text);
		margin: 0;
	}

	h2 {
		font-size: 1.2rem;
		line-height: 1.6rem;
		font-weight: var(--bold);
		color: var(--textMuted);
		margin: 0;

		small {
			font-size: 1.2rem;
			line-height: 1.6rem;
			font-weight: var(--regular);
			color: var(--textMuted);
		}
	}

	p {
		color: var(--textMuted);
		font-size: 1.2rem;
		line-height: 1.6rem;
		margin: 0;

		i {
			margin: 0 .3rem;
			border-radius: 4px;
		}

		b {
			color: var(--text);
		}

		small {
			color: rgb(from var(--textMuted) r g b / 70%);
			font-size: 1.2rem;
			line-height: 1.6rem;
		}
	}

	>:nth-child(2) {
		flex: 1 1 270px;
	}
}

.suddata_ {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0 auto;

	em {
		color: var(--text);
		font-size: 2rem;
		line-height: 2.8rem;
		font-weight: var(--extrabold);
		font-style: normal;
		display: block;
		margin: auto;
		text-align: center;
	}

	small {
		color: rgb(from var(--textMuted) r g b / 50%);
		font-size: 1.2rem;
		line-height: 1.6rem;
		font-weight: var(--medium);
	}

	.textMuted {
		border-right: 1px solid var(--border);
		padding-right: 1rem;

		em {
			color: var(--textMuted);
		}
	}

}


.podium {
	margin: 2.4rem 0;

	h2 {
		font-weight: var(--bold);
		text-transform: uppercase;
		letter-spacing: .025em;
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--textMuted);

		i {
			font-size: 1.2rem;
			margin-right: .4rem;
		}

	}

	.top3 {
		gap: 1rem;
		align-items: center;

		.item {
			--currentColor: var(--text);
			background: rgb(from var(--currentColor) r g b / .08);
			border: 1px solid rgb(from var(--currentColor) r g b / .1);
			border-radius: 1.2rem;
			padding: 1.2rem;
			max-width: 140px;
			min-width: 140px;
			text-align: center;

			&.silver {
				--currentColor: var(--blue);
			}

			&.gold {
				--currentColor: var(--amber);
				order: -1;
			}

			&.orange {
				--currentColor: var(--bs-orange);
			}

			.itemHeder {
				.initials {
					width: 4rem;
					height: 4rem;
					border-radius: 9999px;
					font-size: 1.4rem;
					line-height: 4rem;
					font-weight: var(--bold);
					background: rgb(255 255 255 / 75%);
					color: var(--color1);
					text-align: center;
					display: block;
					margin: auto;
				}

				.name {
					font-size: 1.2rem;
					line-height: 2rem;
					font-weight: var(--bold);
					color: var(--color1);
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					line-clamp: 1;
				}
			}

			.itemBody {
				position: relative;
				padding-top: 10px;

				&:after {
					position: absolute;
					width: 70%;
					height: 1px;
					display: block;
					content: "";
					top: 4px;
					right: 0;
					left: 0;
					margin: auto;
					background: rgb(from var(--currentColor) r g b / .18);
				}

				.medal {
					font-size: 1.8rem;
					line-height: 2.8rem;
				}

				.points {
					font-size: 1.8rem;
					line-height: 1.8rem;
					color: var(--currentColor);
					font-weight: var(--extrabold);
				}

				small {
					font-size: 1.1rem;
					line-height: 1rem;
					color: var(--currentColor);
					position: relative;
					top: -3px;
				}

			}




		}


	}


}

.chartContainer {
	background-color: #ffffff;
	border: 1px solid var(--border);
	padding: 2rem;
	border-radius: 1.6rem;
	margin-bottom: 2.4rem;

	.chartHeader {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 1.6rem;
		flex-wrap: wrap;
		gap: 10px 20px;

		.title {
			h2 {
				font-weight: var(--bold);
				font-size: 1.6rem;
				line-height: 2rem;
				color: var(--text);
				margin: 0;
			}

			p {
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: var(--textMuted);
				margin: 0
			}
		}

		.labels {
			display: flex;
			flex-direction: row;
			gap: .8rem;

			.chartLabel {
				display: flex;
				align-items: center;

				.indicator {
					width: 1rem;
					height: 1rem;
					border-radius: .2rem;
					margin-right: .8rem;
					background-color: var(--bgMuted);

					&.indicatorMe {
						background-color: var(--color1);
					}
				}

				span {
					font-size: 1.1rem;
					line-height: 1.1rem;
					color: var(--textMuted);
					margin: 0
				}
			}

		}
	}
}

.k-tooltip.k-chart-tooltip {
	background-color: #ffffff !important;
	border: 1px solid var(--border) !important;
	border-radius: 1.6rem;

	padding: 1.6rem;

	h3 {
		font-weight: var(--bold);
		font-size: 1.4rem;
		line-height: 1.8rem;
		color: var(--text);
	}

	p {
		font-size: 1.2rem;
		line-height: 1.6rem;
		color: var(--textMuted);

		.float-end {
			color: var(--color1);
			margin-left: .8rem;
		}

		.fi-rr-star {
			color: var(--amber);
		}

		.success {
			color: var(--success2);
		}

		.blue {
			color: var(--blue);
		}

	}

}

.positionContainer {
	margin: 2.4rem 0;
}

.titlegray_ {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	h2 {
		font-weight: var(--bold);
		text-transform: uppercase;
		letter-spacing: .025em;
		font-size: 1.4rem;
		line-height: 2rem;
		color: var(--textMuted);

		i {
			font-size: 1.2rem;
			margin-right: .4rem;
		}
	}

	p {
		color: var(--amber);
		text-transform: uppercase;
		font-size: 1.2rem;
		line-height: 1.6rem;
		font-weight: var(--regular);

		i {
			margin-right: .5rem;
		}
	}

}

/* Admin Pronosticos Especiales */
.sobreHero {
	margin-top: -30px;
}

.finalistasConfigurado {
	display: flex;
	align-items: center;

	span {
		height: auto;
	}
}

.contenedorConfiguracion {
	box-shadow: 0 1px 2px 0 rgb(from black r g b / 0.05);
	padding: 20px;
	background-color: white;
	border: 1px solid var(--border);
	border-radius: 20px;
	margin-top: 16px;

	.titulo {
		--currentColor: var(--text);

		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
		font-size: 1.4rem;
		font-weight: var(--bold);

		i {
			width: 32px;
			height: 32px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: hsl(from var(--currentColor) h s 95);
			color: hsl(from var(--currentColor) h s calc(l + 10));
		}

		&.amber {
			--currentColor: var(--amber);
		}

		&.danger {
			--currentColor: var(--danger);
		}

		&.indigo {
			--currentColor: var(--indigo);
		}

		&.blue {
			--currentColor: var(--blue);
		}
	}

	label {
		color: #6b7280;
		letter-spacing: .025em;
		text-transform: uppercase;
		font-weight: var(--bold);
		font-size: 1.2rem;
		line-height: 1.3;
		display: block;
		margin-bottom: 6px;

		i {
			font-size: 0.9em;
			margin-right: 4px;
		}
	}

	.botonEstado {
		--currentColor: var(--success);

		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		border-radius: 16px;
		font-size: 1.4rem;
		line-height: 1.4;
		font-weight: var(--bold);
		background-color: hsl(from var(--currentColor) h s 95);
		border: 1px solid hsl(from var(--currentColor) h s calc(l + 30));
		color: var(--currentColor);
		transition: var(--transition);

		.indicador {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: var(--currentColor);
		}

		&.inactivo {
			--currentColor: var(--slate);
		}
	}
}

.k-input-value-text:before,
.k-list-item-text:before {
	content: none;
}

.fs-12 {
	font-size: 1.2rem;
}

.fs-14 {
	font-size: 1.4rem;
}

.fs-20 {
	font-size: 2rem;
}

th {
	.amber {
		color: var(--amber);
	}

	.danger {
		color: var(--danger);
	}

	.blue {
		color: var(--blue);
	}

	.success {
		color: var(--success);
	}
}

#contenedorPronosticosEspeciales {
	display: flex;
	flex-direction: column;
	gap: 20px;
}


/* ==========================================================================
        1. LÓGICA DE REORDENAMIENTO Y COMPACTACIÓN (MÓVIL)
        ========================================================================== */
@media (max-width: 991px) {
	main {
		display: flex !important;
		flex-direction: column !important;
	}

	.contenido-principal {
		order: 1 !important;
		margin-bottom: 0 !important;
	}

	.publicidad {
		order: 2 !important;
		width: 100% !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: -20px !important;
		margin-bottom: 30px !important; /* <--- Esta es la línea que separa del footer */
	}

	/* TAMAÑO ESTÁNDAR OBLIGATORIO */
	.publicidad-item-wrapper .template {
		height: 380px !important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.publicidad section.publicidad {
		padding-top: 0 !important;
		padding-bottom: 10px !important;
	}

	.publicidad-container-logic {
		padding: 0 40px;
	}

	.carousel-control-prev,
	.carousel-control-next {
		width: 30px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ==========================================================================
        2. TU CSS ORIGINAL (Mantenido)
        ========================================================================== */
.publicidad-vertical-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	align-items: center;
	position: relative;
	z-index: 10;
}

.publicidad-item-wrapper {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}

	.publicidad-item-wrapper .template {
		width: 100%;
		margin: 0 auto;
		border-radius: 12px;
		padding: 15px;
		text-align: center;
		background-color: white;
		box-shadow: 0 4px 10px rgba(0,0,0,0.06);
	}

	.publicidad-item-wrapper img,
	.publicidad-item-wrapper table,
	.publicidad-item-wrapper .btn {
		max-width: 100% !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: inline-block;
	}

	.publicidad-item-wrapper p {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

/* ==========================================================================
        3. LÓGICA PARA ESCRITORIO (Corrección de parpadeo/espavilo)
        ========================================================================== */
@media (min-width: 992px) {
	main {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}

	.contenido-principal {
		flex: 1;
	}

	.publicidad {
		max-width: 300px;
	}

	/* Forzamos visibilidad y ANULAMOS animaciones de Bootstrap */
	.carousel-item {
		display: block !important;
		margin-right: 0 !important;
		margin-bottom: 15px;
		transition: none !important; /* Quita el efecto de desvanecimiento */
		transform: none !important; /* Quita el movimiento lateral */
		position: relative !important;
		visibility: visible !important;
	}

	.carousel-inner {
		display: flex;
		flex-direction: column;
		gap: 15px;
		transform: none !important;
	}

	.carousel-control-prev, .carousel-control-next {
		display: none !important;
	}
}

.pagedind_ .mx-land {
	max-width: 640px;
}