/* # General
* ------------------------------------------------------------------- */
@import url('liquidacion.css');

@import url('variables.css');

/* estructura */
@import url('grid.css');
@import url('header.css');
@import url('sidebar.css');
@import url('content.css');
@import url('footer.css');

/* uikit */
@import url('card.css');
@import url('form.css');
@import url('modal.css');
@import url('botones.css');
@import url('scroll.css');
@import url('fixture.css');

@import url('designar.css');

@import url('tooltip.css');
/* @import url('table.css'); */
@import url('loader.css');



/* nuevos */
/* @import url('appointed.css'); */
@import url('matches.css');


/* # General
* ------------------------------------------------------------------- */
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent
}
*, :after, :before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

body, html { -webkit-overflow-scrolling: touch; }
html { font-size: var(--text-base); }

@media (max-width:1023px) {
	html {
		font-size: 92%
	}
}
@media (max-width:767px) {
	html {
		font-size: 86.5%
	}
}

body {
	margin: 0;
	font-weight: var(--fw--400);
	font-size: calc(var(--text-base) * 1rem);
	line-height: 1.6;
	font-family: var(--font-family-default);
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;
	font-variant: normal;
	color: var(--text-primary);
	background: var(--body-color);
}
a, button {
	cursor: pointer
}
button, input {
	-webkit-appearance: none;
	padding: 0;
	border: none;
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
	color: inherit
}
embed, img, video {
	max-width: 100%;
	height: auto;
	border: none;
}
embed, img, svg, video {
	display: inline-block;
	line-height: 1;
}
svg {
	fill: currentColor;
}
h1, h2, h3, h4, h5, h6, p, a  { margin: 0; }

a {
	color: inherit;
	-webkit-transition: var(--tran-base);
	transition: var(--tran-base);
	text-decoration: none;
}

a:hover {
	color: var(--primary);
	text-decoration: none;
}


code, kbd, pre, samp {
	font-family: var(--font-mono);
}

pre {
	display: flex;
	flex-direction: column;
	white-space: pre-wrap;
	margin: 0;
}


[data-theme=dark] .text-dark-theme,
[data-theme=light] .text-light-theme { color: var(--text-secondary-color) }
[data-theme=dark] .text-light-dark-theme { color: var(--text-primary-color) }



/* Estilos para ui de wisel
---------------------------------------------------*/

/*  */
[class^=icon-] {
	display: inline-flex;
	vertical-align: middle;
	line-height: 1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%
}


.icons-svg-symbols {
	border: 0;
	clip: rect(0 0 0 0);
	width: 0;
	height: 0;
	margin: -1px;
	padding: 0;
	position: absolute;
	overflow: hidden;
}

section.ui {
	margin: .5rem 0
}
section.ui h4 { font-size: 1.3rem; line-height: 1.5; padding: 1rem 0 0;}


.select--match {
	background: var(--border-active) !important;
	color: var(--white-color);
}

/* tag */

.tag {
	display: inline-flex;
	align-items: center;
	border-radius: 5px;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	color: #a3a9b0;
}
.tag--red {
	color: #e1223c;
	background-color: rgba(225, 34, 60, 0.2);
}
.tag--green {
	color: #52b49c;
	background-color: rgba(82, 180, 156, 0.2);
}
.tag--icon svg {
	fill: currentColor;
	margin-right: 0.3rem;
}

.rating {
	border: 1px solid rgba(163, 169, 176, 0.1);
	padding: 0.5em 0.8em;
	vertical-align: middle;
	position: relative;
}
.rating--primary {
	color: var(--white-color);
	background-color: var(--primary-color);
}
.rating--up {
	border-color: rgba(82, 180, 156, 0.1);
}
.rating--up:before {
	border-bottom: 6px solid;
	top: -0.375rem;
	transform: translate(-50%, -100%);
}
.rating--down {
	border-color: rgba(225, 34, 60, 0.1);
}
.rating--down:before {
	border-top: 6px solid;
	bottom: -0.375rem;
	transform: translate(-50%, 100%);
}
.rating--up:before, .rating--down:before {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	position: absolute;
	left: 50%;
}
.rating:not([class*="--"]) {
	background-color: rgba(163, 169, 176, 0.1);
}

.close {
	color: inherit;
	display: contents;
}







/* league */

.league {
	display: flex;
	align-items: center;
}
.league__logo {
	width: 35px;
	height: auto;
	align-self: flex-start;
	margin-right: 0.75rem;
}
.league__title h3 {
	margin: 0;
	font-size: 1rem;
}
.league__title small {
	color: #a3a9b0;
}
.league__number {
	margin-left: auto;
	color: #cfd2d5;
	font-size: 1.15rem;
}


.header__usuario-imagen {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	position: relative;
	z-index: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 2.6667rem;
	height: 2.6667rem;
	border-radius: var(--radius--full);
	background-color: rgba(0,0,0,0.2);
}

.header__usuario-imagen img {
	width: 100%;
	height: 100%;
	border-radius: var(--radius--full);
}

@media (min-width:576px) {
	.header__usuario-imagen {
		margin-right: 15px
	}
}

.header__usuario-imagen-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: -1
}



.perfil {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	display: inline-flex;
	gap: 1rem;
}
.perfil__horizontal {
	-ms-box-orient: horizontal;
}
.perfil--vertical {
	display: block;
	-ms-box-orient: vertical;
	flex-wrap: wrap;
	gap: .5rem;
	width: calc(100% + 1rem);
	justify-content: flex-start;
}

.perfil__imagen {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	position: relative;
	z-index: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1.5em;
	background-color: var(--primary-color);
	color: var(--white-color);
	box-shadow: 0 0 0 4px var(--black-hover-color);
}

.perfil__imagen img {
	width: 100%;
	height: 100%;
	border-radius: 50%
}

.perfil__imagen-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: -1
}
.perfil__datos h3 {
	margin: 0;
	font-size: 1rem;
	color: black;
}
.perfil__datos small {
	color: black;
}




/* card ew */


.emulated-flex-gap {
	--gap: 12px;
	display: inline-flex;
	flex-wrap: wrap;
	margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
	width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
	margin: var(--gap) 0 0 var(--gap);
}

/* .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-column-gap: 1rem;
	grid-row-gap: 2rem;
	grid-auto-flow: column;
	list-style: none;
} */


.bg-primary {
	background-color: var(--primary-color);
}

section.contents {
	margin: 1.5rem 0;
}




/*  */
.flex {
	display: flex;
	gap: .5rem;
}

.align--center { align-items: center; }
.align--start { align-items: flex-start; }
.align--end { align-items: flex-end; }
.align--stretch { align-items: stretch; }
.align--baseline { align-items: baseline; }


.primary-color {
	color: var(--primary-color)
}


/*  */



/* hero 1 */
.hero {
	background-color: var(--primary-color);
	padding: 2rem;
	position: relative;
}

.hero__title {
	width: 100%;
	position: relative;
	font-weight: var(--fw--500);
	color: var(--primary-light);

}
.hero__title span {
	font-size: calc(0.5rem + 1vw);
}

.hero__title h2 {
	position: relative;
	margin: 0;
	font-weight: var(--fw--400);
	font-size: calc(1rem + 1vw);
	line-height: normal;
	z-index: 2;
}

.hero__content {
	display: flex;
	align-items: flex-end;
	height: 100%;
}

.hero__text {
	position: relative;
	font-weight: var(--fw--400);
	line-height: 1.5;
	margin-top: 0;
	max-width: 100%;
	margin: 0.5rem 0;
	z-index: 2;
}


.hero__img {
	width: 100%;
	max-width: 350px;
	position: absolute;
	overflow: hidden;
	height: calc(110%);
	top: -10%;
	right: -5rem;
}

.hero__img--left {
	left: -4rem;
}
.hero__img img {
	width: 100%;
	height: auto;
	/* filter:drop-shadow(0 6px 10px rgba(0, 0, 0, 0.05)); */
}



.hero__img--center {
	left: 0;
	right: 0;
}

.hero__img--center {
	width: 100%;
	max-width: 350px;
	position: absolute;
	overflow: hidden;
	height: calc(100%);
	top: 0;
	right: -5rem;
}


.hero3 {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
}



@media only screen and (max-width: 600px) {
	.hero__img {
		width: 85%;
		max-width: 350px;
		position: absolute;
		overflow: hidden;
		height: calc(110%);
		top: -10%;
		right: -4rem;
		z-index: 1
	}

	.hero__img--left {
		top: -10%;
		left: -5rem;
	}
}




/* details */

.details details {
	border-radius: 4px;
	overflow: hidden;
	padding: 20px;
	background: rgba(0, 0, 0, 0.05);
	border-left: 5px solid gray;
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.05);
}
.details details:not(:last-of-type) {
	margin-bottom: 15px;
}
.details details.warning {
	background: var(--color-summary-1);
	border-left: 5px solid var(--color-summary-1-highlight);
}
.details details.info {
	background: var(--color-summary-2);
	border-left: 5px solid var(--color-summary-2-highlight);
}
.details details.alert {
	background: var(--color-summary-3);
	border-left: 5px solid var(--color-summary-3-highlight);
}
.details details summary,
.details details p {
	font-style: normal;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-title);
}
.details details summary:not(:last-of-type),
.details details p:not(:last-of-type) {
	margin-bottom: 10px;
}
.details details p {
	padding-left: 30px;
}
.details details summary {
	cursor: pointer;
	margin-bottom: 0;
	/* list-style-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); */
}
.details details summary::-webkit-details-marker {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	color: transparent;
	background-size: 100% 100%;
	margin-right: 18px;
	width: 16px;
	height: 16px;
	transform: translateY(2px);
}
.details details[open] summary {
	margin-bottom: 10px;
	/* list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); */
	font-weight: 700;
}
.details details[open] summary::-webkit-details-marker {
	background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	color: transparent;
	background-size: 100% 100%;
	margin-right: 20px;
	width: 12px;
	height: 12px;
	transform: translateY(1px);
}
.details details[open] p {
	padding-left: 32px;
}




/* tabs */


.tabs {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	border-bottom: 2px solid #ddd;
	padding: 18px 0;
}

.nav-item {
	display: none;
}

.category {
	font-weight: 500;
	color: var(--secondary-color);
	border-bottom: 2px solid #ddd;
	transition: 0.4s ease-in;
	padding: 20px 30px;
	cursor: pointer;
}

#opt-1:checked + label,
#opt-2:checked + label,
#opt-3:checked + label,
#opt-4:checked + label {
	color: var(--checkbox-color);
	border-bottom: 2px solid var(--checkbox-color);
}


.task-item {
	display: none;
}

.tasks-wrapper {
	padding: 30px 0;
	flex: 1;
	overflow-y: auto;
	height: 100%;
	padding-right: 8px;
}

.task {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 16px;
	padding-left: 30px;
	color: var(--task-color);
	font-size: 13px;
	font-weight: 500;
}
.task:hover {
	transform: translatex(2px);
}
.task label {
	cursor: pointer;
}

label .label-text {
	position: relative;
}

label .label-text:before {
	content: "";
	position: absolute;
	width: 1rem;
	height: 1rem;
	border: 1px solid #ddd;
	border-radius: 5px;
	left: -24px;
	transition: 0.2s ease;
}

.task-item:checked + label .label-text:before {
	background-color: var(--checkbox-color);
	border: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 10px;
	background-position: center;
	border: 1px solid var(--checkbox-color);
}

.tag {
	font-size: 0.75rem;
	padding: 4px 8px;
	border-radius: 20px;
}
.tag.approved {
	background-color: var(--tag-color-one);
	color: var(--tag-color-text-one);
}
.tag.progress {
	background-color: var(--tag-color-two);
	color: var(--tag-color-text-two);
}
.tag.review {
	background-color: var(--tag-color-three);
	color: var(--tag-color-text-three);
}
.tag.waiting {
	background-color: var(--tag-color-four);
	color: var(--tag-color-text-four);
}

@media screen and (max-width: 900px) {
	.left-bar {
		display: none;
	}
}
@media screen and (max-width: 700px) {
	.task-manager {
		flex-direction: column;
		overflow-y: auto;
	}

	.right-bar, .page-content {
		width: 100%;
		display: block;
	}

	.tasks-wrapper {
		height: auto;
	}
}
@media screen and (max-width: 520px) {
	.page-content {
		padding: 40px 10px 0 10px;
	}

	.category {
		padding: 20px;
	}
}





.card__resaltar {
	border-radius: 6px;
	background: #fff;
	padding: 15px 20px;
	cursor: pointer;
}
.card__resaltar--header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card__resaltar--header p {
	color: #99a2ac;
}
.card__resaltar:hover {
	transform: scale(1.1);
	transition: all 0.3s;
	background: #ed3b54;
	box-shadow: 0px 81px 81px -71px rgba(0, 0, 0, 0.75);
}
.card__resaltar:hover p {
	color: #fff;
}
.card__resaltar:hover svg path {
	fill: #fff;
}
.card__resaltar--footer {
	padding-top: 30px;
	font-size: 22px;
}







/*	*/









/* grid para los cards */
.grid-ui {
	margin: 20px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	grid-column-gap: 1.25rem;
	grid-row-gap: 1rem;

	align-items: start; /* cada card en alto automatico */

	-webkit-animation: slideY 0.6s both;
			animation: slideY 0.6s both;
}
@media screen and (max-width: 1212px) {
	.grid-ui {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 930px) {
	.grid-ui {
		grid-template-columns: repeat(1, 1fr);
	}
}



/* status */

.status {
	/* color: var(--tag-color-text-one); */
	display: inline-flex;
	align-items: center;
}
.status svg {
	margin-right: 6px;
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 4px;
	background-color: var(--tag-color-one);
	color: currentColor;
}
.status.is-red {
	color: var(--tag-color-text-three);
}
.status.is-red svg {
	background: var(--tag-color-three);
	color: currentcolor;
}
.status.is-wait {
	color: var(--tag-color-text-two);
	position: relative;
}
.status.is-wait:before {
	width: 22px;
	height: 22px;
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	background: var(--tag-color-two);
	border-radius: 4px;
}
.status.is-wait svg {
	background-color: transparent;
	color: currentcolor;
	-webkit-animation: turn 2s linear infinite both;
			animation: turn 2s linear infinite both;
}

@-webkit-keyframes turn {
	100% {
		transform: rotate(1turn);
	}
}

@keyframes turn {
	100% {
		transform: rotate(1turn);
	}
}



/*  */



/* Scrollbar ------*/
::-webkit-scrollbar {
	width: 0px;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.5);
	border-radius: 15px;
}
::-webkit-scrollbar-thumb:hover {
	background-color: transparent;
}





/* user */
.side-wrapper {
	margin: 1rem 0
}
.user {
	display: flex;
	align-items: center;
	cursor: pointer;
	gap:0.625rem;
}

.user + .user {
	margin-top: 1rem;
}

.user-img {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	margin-right: 1rem;
	object-fit: cover;
	object-position: center;
}

.user__name {
	font-size: 1rem;
}
.user__name {
	display: flex;
	flex: 1;
	align-items: center;
}
.user-status {
	background-color: #7fd222;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-left: auto;
}
.user-status.offline {
	background-color: #606a8d;
}
.user-status.idle {
	background-color: #dd1c20;
}


.status-menu {
	padding: 20px;
	display: flex;
	align-items: center;
}
.status-menu-item {
	text-decoration: none;
	color: red;
	padding: 10px 14px;
	line-height: 0.7;
	font-weight: 500;
	border-radius: 20px;
}
.status-menu-item.active, .status-menu-item:hover {
	background-color: #2e2e40;
	color: black;
}
.status-menu-item + .status-menu-item {
	margin-left: 10px;
}
@media screen and (max-width: 500px) {
	.status-menu {
		font-size: 1rem;
	}
	.status-menu-item + .status-menu-item {
		margin-left: 0;
	}
}

.status-img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 50%;
	margin-right: 20px;
}

.status-main {
	padding: 0 20px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid red;
	padding-bottom: 20px;
	flex-wrap: wrap;
}

.status-textarea {
	flex-grow: 1;
	background-color: transparent;
	border: none;
	resize: none;
	margin-top: 15px;
	color: #fff;
	max-width: calc(100% - 70px);
}
.status-textarea::placeholder {
	color: green;
}

.status-actions {
	display: flex;
	padding: 10px 20px;
}

.status-action {
	text-decoration: none;
	color: pink;
	margin-right: 20px;
	display: flex;
	align-items: center;
}
.status-action svg {
	width: 1rem;
	flex-shrink: 0;
	margin-right: 8px;
}
@media screen and (max-width: 1320px) {
	.status-action {
		width: 16px;
		overflow: hidden;
		color: transparent;
		white-space: nowrap;
	}
}

.status-share {
	background-color: #1b86f9;
	border: none;
	color: #fff;
	border-radius: 4px;
	padding: 10px 20px;
	margin-left: auto;
	box-shadow: 0 0 20px #1b86f9;
	cursor: pointer;
}



.stories {
	border-bottom: 1px solid #272a3a;
}

.stories .user-img {
	border: 2px solid green;
}

.stories .album-date {
	font-family: "Source Sans Pro", sans-serif;
}


.right-side {
	width: auto;
	flex-shrink: 0;
	margin-left: auto;
	overflow: auto;
	display: flex;
	flex-direction: column;
}




/* SCROLL */
.scrolling {
	position: relative;
	-ms-scroll-snap-type: y mandatory;
		scroll-snap-type: y mandatory;
	height: 450px;
	width: 100%;
	overflow-y: auto;
	margin-left: auto;
	margin-right: auto;
	scroll-padding: 2rem;
}
.scrolling::before {
	position: sticky;
	display: block;
	top: -10px;
	height: 30px;
	width: 100%;
	content: "";
	z-index: 3;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent);
}
.scrolling::after {
	position: sticky;
	display: block;
	bottom: -10px;
	height: 30px;
	width: 100%;
	content: "";
	z-index: 3;
	background: red;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.8), transparent);
}
/*	*/