/**
 * @name: ZCode Theme
 * @folder: default
 * @copyright: Miguel92
 * @link: https://phpost.es/user-23.html
 * @description: El theme fue creado desde cero, tiene varios colores para usar, elegir tu propio color y el modo oscuro si lo desean. Es un theme bastante completo y una combinación de **Syntaxis Lite** y **PHPost23**
 * @tags: html5, css3, jquery, javascript, lazyload, liteYt, phpost, syntaxislite, sl3
 * @other: https://discord.gg/StWZtrt2DE
**/

/**
 * LIVE
*/
.UIBeeper {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 1rem;
	z-index: 999;
}
.UIBeep {
	margin-bottom: 0.765rem;
	background: var(--body-bg);
	position: relative;
	border: 1px solid var(--border-color);
	box-shadow: var(--box-shadow);
	width: 370px;
	font-size: 0.875rem;
	padding-right: 2rem;
	border-radius: var(--border-radius);
}
.UIBeep a {
	--beepIcon: 2.325rem;
	text-decoration: none;
	color: var(--body-color);
	display: grid;
	grid-template-columns: var(--beepIcon) 1fr;
	place-items: center start;
	gap: .75rem;
}
.UIBeep .UIBeep_Icon {
	width: var(--beepIcon);
	height: var(--beepIcon);
	border-radius: var(--border-radius);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--translucent-bg);
}
.UIBeep .UIBeep_Icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.UIBeep.UIBeep--notification .UIBeep_Icon .monac_icons {
	--size: 1.6rem;
}
.UIBeep .beeper_x {
	position: absolute;
	top: .325rem;
	right: .325rem;
	display: none;
	width: 1.5rem;
	height: 1.5rem;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.325rem;
}
.UIBeep:hover .beeper_x {
	display: block;
}
.UIBeep.UIBeep--message a {
	--beepIcon: 50px;
}
.UIBeep.UIBeep--message strong {
	display: block;
}
.UIBeep .blueName {
	color: var(--main-bg);
	font-weight: 600;
}
/**
 * Other
*/
#loading {
	top: 1rem;
	left: 1rem;
	z-index: 9999;
}
.irCielo {
	width: 2rem;
	height: 2rem;
	right: 2rem;
	bottom: 2rem;
}
.slider {
   scroll-snap-type: x mandatory;
   overscroll-behavior-x: contain;
}
.up-categoria {
	display: block;
	place-items: center;
	background: var(--main-bg) var(--background) no-repeat .325rem .325rem / 1rem;
	color: var(--main-color);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: var(--border-radius);
	padding: 0 .5rem 0 1.675rem;
}
.up-categoria span {
	display: block;
}
.up-show--error {
	width: 40%;
	margin: 2rem auto;
	padding: 2rem;
	text-align: center;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	background: #FFD9D9;
	color: #B83A3A;
	overflow: hidden;
	position: relative;
	font-weight: 500;
}
[data-theme="dark"] .up-show--error {
	background: #B83A3A;
	color: #FFD9D9;
}
.up-show--header {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 3rem;
	height: 4rem;
	line-height: 4rem;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.up-show--header iconify-icon {
	font-size: 3rem;
}
.up-show--body p {
	font-size: 1.5rem;
}
.up-show--body hr {
	display: block;
	margin: 2rem auto;
	width: 70%;
}
.empty {
	--tone: var(--tone-neutral);
	margin: 0.325rem;
	padding: .75rem .5rem;
	text-align: center;
	font-weight: 500;
	border-radius: var(--border-radius);
	color: var(--tone);
	background: color-mix(in oklch, var(--tone) 15%, Canvas);
	border: 1px solid color-mix(in oklch, var(--tone) 35%, transparent);
	&.empty-warning {--tone: var(--tone-warning);}
	&.empty-danger {--tone: var(--tone-danger);}
	&.empty-success {--tone: var(--tone-success);}
}
#mensaje-top .news--item {
	margin: 0;
	display: none;
	padding: .5rem 2.875rem;
}
#mensaje-top {
	max-height: max-content;
}
.news--item,
.news--item[data-news-type="0"] {
	--background: #EEE;
	--color: #111;
	background: var(--background);
	color: var(--color);
	position: relative;
}
[data-theme="dark"] .news--item,
[data-theme="dark"] .news--item[data-news-type="0"] {
	--background: #333;
	--color: #fff;
}
/* importante */
.news--item[data-news-type="1"] {
	--background: #FCE8D8;
	--color: #C45700;
}
/* cambios */
.news--item[data-news-type="2"] {
	--background: #DCFBF0;
	--color: #098D60;
}
.news--item .countdown {
	position: absolute;
	top: .5rem;
	right: 1rem;
}
.avatar, .avatar img {
	--avatar-size: 1rem;
	--avatar-rounded: var(--border-radius);
	width: var(--avatar-size);
	height: var(--avatar-size);
	border-radius: var(--avatar-rounded);
	object-fit: cover;
}
.avatar img {
	width: 100%;
	height: 100%;
}
.avatar-circle {
	--avatar-rounded: var(--border-radius-pill);
}
.avatar-status, .status-offline {
	--color: #CCC;
	border: 2px solid var(--color);
}
.status-online {
	--color: #17BA82;
}
.status-inactive {
	--color: #A547E6;
}
.status-banned {
	--color: #F6E02A;
}
.bloquearU {
	--button-bg: var(--danger-bg);
	--button-border: var(--danger-bg);
}
.width {
	--avatar-size: 1rem;
	width: var(--avatar-size)!important;
}
.height {
	--avatar-size: 1rem;
	height: var(--avatar-size)!important;
}
.avatar-1, .width-1, .height-1 { --avatar-size: 1rem; }
.avatar-2, .width-2, .height-2 { --avatar-size: 1.5rem; }
.avatar-3, .width-3, .height-3 { --avatar-size: 2rem; }
.avatar-4, .width-4, .height-4 { --avatar-size: 2.5rem; }
.avatar-5, .width-5, .height-5 { --avatar-size: 3rem; }
.avatar-6, .width-6, .height-6 { --avatar-size: 3.5rem; }
.avatar-7, .width-7, .height-7 { --avatar-size: 4rem; }
.avatar-8, .width-8, .height-8 { --avatar-size: 4.5rem; }
.avatar-9, .width-9, .height-9 { --avatar-size: 5rem; }
.avatar-10, .width-10, .height-10 { --avatar-size: 5.5rem; }
.avatar-11, .width-11, .height-11 { --avatar-size: 6rem; }
.avatar-12, .width-12, .height-12 { --avatar-size: 6.5rem; }
.avatar-13, .width-13, .height-13 { --avatar-size: 7rem; }
.avatar-14, .width-14, .height-14 { --avatar-size: 7.5rem; }
.avatar-15, .width-15, .height-15 { --avatar-size: 8rem; }
.avatar-16, .width-16, .height-16 { --avatar-size: 8.5rem; }
.avatar-17, .width-17, .height-17 { --avatar-size: 9rem; }
.avatar-18, .width-18, .height-18 { --avatar-size: 9.5rem; }
.avatar-19, .width-19, .height-19 { --avatar-size: 10rem; }
.avatar-20, .width-20, .height-20 { --avatar-size: 10.5rem; }

.bg\:repeat {
	background-repeat: repeat;
}
.bg\:no-repeat {
	background-repeat: no-repeat;
}
.bg\:repeat-x {
	background-repeat: repeat-x;
}
.bg\:repeat-y {
	background-repeat: repeat-y;
}
.bg\:size-cover {
	background-size: cover;
}
.bg\:size-containt {
	background-size: containt;
}
.color-inverter {
	filter: invert(1);
}
body {
	padding-top: 2rem;
}
header .brand {
	padding: 1rem;
}
header .brand .title-site a {
	font-size: 3.325rem;
}
header .brand .title-site a small {
	font-size: 0.75rem;
}
.ad {
	overflow: hidden;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}
.ad468 {
	width: 468px;
	height: 60px;
}
.ad300 {
	width: 300px;
	height: 250px;
}
.ad728 {
	width: 728px;
	height: 90px;
}
.ad160 {
	width: 160px;
	height: 600px;
}
.upform-select--option {
	display: block;
	padding: .5rem .325rem .325rem 2rem;
	margin-bottom: 0.325rem;
	border-radius: var(--border-radius);
	cursor: pointer;
}
.upform-select--option,
.upform-select--option:checked {
	background-repeat: no-repeat!important;
	background-position: .125rem .325rem!important;
	background-size: 1.325rem!important;
}
.upform-select--option:first-child {
	padding: .5rem .325rem;
}
.upform-select--option:checked {
	background: var(--main-bg);
	color: var(--main-color);
}
/**
 * Lista
 * .up-navbar
 * .up-branding
 * .up-menu
 * .up-dropdown
 * .up-navbar-menu[data-menu="secondary"]
*/
.up-navbar {
	--navbar: 3rem;
	--navbar-link: 2.125rem;
	height: var(--navbar);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
/**
 * Item
*/
.up-menu--item[data-badge="true"] a[data-popup]::before {
	content: attr(data-popup);
	background: var(--main-bg);
	color: #FFF;
	font-size: 0.6rem;
	height: 1rem;
	width: 1.325rem;
	text-align: center;
	line-height: 1rem;
	position: absolute;
	top: -.125rem;
	right: -.125rem;
	border-radius: var(--border-radius-sm);
}
/**
 * Link
*/
.up-menu--link, 
.up-secondary--link {
	height: auto;
	font-weight: 600;
}
.up-menu--link[data-dropmenu] {
	padding-right: 2rem;
}
.up-menu :where(.active) {
	background: var(--main-bg);
	color: var(--main-color);
}
.up-menu :where(.up-menu--link, .up-dropdown--item):hover {
	background: var(--main-bg-hover);
	color: var(--main-color);
}
.up-menu :where(.up-menu--link, .up-dropdown--item):active {
	background: var(--main-bg-active);
	color: var(--main-color);
}
.up-menu :where(.up-dropdown--item[data-total])::before {
	content: attr(data-total);
	position: absolute;
	top: .5rem;
	right: 1rem;
}
/**
 * Dropdown
*/
.up-dropdown--secondary {
	--subdrop-item-height: 2.325rem;
	right: 0;
	width: 320px;
	top: calc(var(--navbar-link) + .5rem);
	box-shadow: var(--box-shadow);
	margin-left: 0;
}
.up-dropdown.up-dropdown--secondary::before {
	left: auto;
	right: .5rem;
}
.up-dropdown--item:last-child {
	margin-bottom: 0;
}
.up-dropdown--item.logout {
	color: #FD3D3D;
}
.up-dropdown--item.logout:hover {
	background: #E64747;
	color: var(--main-color);
}
.up-dropdown--item.logout:active {
	background: #BC1515;
	color: var(--main-color);
}
.up-dropdown--secondary .menu-user {
	grid-template-columns: 3.5rem 1fr 2.5rem;
}
.up-dropdown--secondary .menu-user a {
	text-decoration: none;
	font-size: 1.325rem;
}
.up-dropdown--secondary .menu-user span a {
	font-size: 0.75rem;
	font-weight: 600;
}
.up-dropdown[data-dropdown="false"] {
	display: none;
}
/**
 * Menu secundario link
*/
.up-droplist {
	max-height: 300px;
}
.up-droplist--item {
	height: 2.125rem;
	line-height: 2.125rem;
}
.up-droplist--item:hover,
.up-droplist--item.unread {
	background-color: #FFF6E4;
}
.up-droplist--item:last-child {
	margin-bottom: 0;
}
.up-subdropdown {
	top: 0;
	right: -100%;
	transition: right .5s ease-in-out;
}
.up-subdropdown.show {
	right: 0;
	transition: right .5s ease-in-out;
}
.up-subdropdown .up--close {
	cursor: pointer;
}

.up-dropdown--secondary .up--close,
.up-dropdown--secondary .up-dropdown--item {
	height: var(--subdrop-item-height);
}
.up-collapse {
	top: var(--navbar);
	height: calc(100vh - var(--navbar));
	max-width: calc(100vw / 2);
	min-width: 80vw;
	left: -100%;
	transition: left .5s ease-in-out;
}
.up-collapse.show {
	left: 0;
	transition: left .5s ease-in-out;
}

@media (width >= 992px) {
	body {
		padding-top: 0;
	}
	.up-navbar {
		position: relative;
		background: var(--main-bg-rgb);
		margin-top: 1rem;
	}
	.up-menu--link .item--text,
	.up-secondary--link.up--user span {
		display: block;
	}
	.up-collapse {
		all: unset;
	}
	.up-menu--link, 
	.up-secondary--link {
		height: var(--navbar-link);
	}
	.up-dropdown {
		width: 320px;
		top: calc(var(--navbar-link) + .5rem);
		box-shadow: var(--box-shadow);
		border-top: .125rem solid var(--main-bg);
	}
}
/**
 * Componentes
*/
.up-badge {
	--badge-border: transparent;
	--badge-bg: var(--main-bg);
	border: 1px solid var(--badge-border);
	background: var(--badge-bg);
	color: #FFF;
	height: 1.225rem;
	line-height: 1.125rem;
	font-size: 0.675rem;
	font-weight: 700;
	padding: 0 .675rem;
	border-radius: var(--border-radius-pill);
	display: inline-block;
	width: max-content;
	text-decoration: none;
}
.up-card {
	margin-bottom: 1rem;
	border-radius: var(--border-radius);
}
.up-card > div:last-child {
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.up-card--header {
	--header-icon: 2.5rem;
	--header-border: solid var(--main-bg);
	border-bottom: 1px var(--header-border);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
.up-header--icon {
	width: var(--header-icon);
	height: var(--header-icon);
	color: var(--main-bg);
	border-top-left-radius: var(--border-radius);
	display: grid;
	place-items: center;
	border-bottom: 3px var(--header-border);
	margin-bottom: -2px;
}
.up-header--icon .uicon-svg {
	width: calc(var(--header-icon) - .5rem);
	height: calc(var(--header-icon) - .5rem);
}
.up-header--icon:last-child {
	position: absolute;
	right: 0;
}
.up-card--header.up--reverse {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.up-card--header.up--reverse .up-header--icon  {
	border-top-left-radius: 0;
	border-top-right-radius: var(--border-radius);
}
.up-header--title {
	align-content: center;
	font-weight: 500;
	width: auto;
	height: var(--header-icon);
	line-height: var(--header-icon);
	border-bottom: 3px var(--header-border);
	margin-bottom: -2px;
	padding-right: .5rem;
}
.up-card--body {
	position: relative;
}
.up-card--footer {
	font-size: 0.875rem;
	padding: 0.325rem;
	display: block;
	text-align: center;
}
.up-card--footer .btn {
	display: block;
	margin: 0 auto;
	padding: 0.125rem 1rem;
}
.check-filter {
	cursor: pointer;
	background: var(--translucent-bg);
}
.check-filter input[type="checkbox"] + span {
	color: var(--main-bg-hover);
}
.check-filter input[type="checkbox"]:checked + span {
	color: var(--main-bg);
	font-weight: 700;
}

.ticket {
	font-size: 0.75rem;
	display: inline-block;
	padding: 0 .325rem;
	line-height: 1.125rem;
	height: 1.125rem;
	border-radius: .325rem;
	background: var(--background);
	&.en_espera {
		--background: #FED9AA;
	}
	&.en_curso {
		--background: #C2D8FD;
	}
	&.realizado {
		--background: #A9FCBA;
	}
	&.abandonado {
		--background: #E2E2E2;
	}
	&.pausado {
		--background: #FBB5F5;
	}
	&.cancelado {
		--background: #FDBEBE;
	}
}
.message-version-new {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	z-index: 9999;
	background: var(--body-bg);
	backdrop-filter: blur(5px);
	padding: 0.5rem 1rem;
	box-shadow: 0 0 .5rem rgb(0,0,0,.2);
	border-radius: .325rem;
	width: 300px;
	strong {
		color: var(--main-bg);
	}
}