// out: ./dist/nav.css

@root: "../../../assets/css/";

@import (reference) "color.less";
@import (reference) "font.less";
@import (reference) "index.less";
@import (reference) "variables.less";

nav {
	.widthAvailable();
	background: var(--color-bg-nav);
	top: 0;
	left: 0;
	display: flex;
	z-index: 100;
	position: relative;
	justify-content: space-between;
	width: var(--width-nav);
	height: -webkit-fill-available;
	height: -moz-available;
	height: fill-available;
	flex-direction: column;
	padding-right: 0;
	outline: 1px solid var(--color-white);
    border-right: 1px solid var(--color-line-soft);
	//border-right: 1px solid var(--color-line-soft);
	//border-bottom: 1px solid var(--color-line-menu-top);
	//box-shadow: 1px 1px 3px rgba(0, 0, 0, 5%);

	.brand {
		padding: 8px 8px;
		display: flex;
		align-items: center;

		>img {
			max-height: 40px;
			width: -webkit-fill-available;
			height: -webkit-fill-available;
		}

		.boxSites {
			a {
				padding: 8px 4px;
				color: var(--color-btn-nav);

				&:hover {
					color: var(--color-btn-nav-hover);
				}
			}
		}
	}

	.innerNav {
		display: flex;
		align-items: center;
		/* justify-content: space-between;
		padding-right: 16px;		margin-top: -4px; */
		flex-direction: column;
		height: calc(100vh - 48px);
		padding-bottom: 16px;

		.navTabs {
			width: 68%;
			display: flex;
			height: 100%;
			align-items: center;
			overflow-y: auto;
			overflow-x: hidden;
			gap: 4px;
			align-items: flex-start;
			scrollbar-width: none;
			&::-webkit-scrollbar { display: none; }


			.tabsNavList {
				display: flex;
				flex-direction: column;
				gap: 4px;
				.widthAvailable();
			}

			.boxTabsMobile {
				display: none;
				.widthAvailable();

				.numTabMobile {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					min-width: 24px;
					height: 24px;
					padding: 0 6px;
					border-radius: 999px;
					background: var(--color-bg-gray-light);
					font-size: 12px;
					font-weight: 600;
					color: var(--color-text);
					cursor: pointer;
				}

				.boxTabMobil {
					display: none;
				}
			}

			.item {
				width: 100%;
				height: 34px;

				display: flex;
				padding: 0;
				margin: 0;
				border: 1px solid var(--color-white);
				border-radius: var(--border-radius-md);
				overflow: visible;
				cursor: pointer;
				position: relative;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				box-sizing: border-box;
				background-color: var(--color-white);

				&.active {
					//background-color: var(--color-tab-nav-bg-hover);
					//border-color: var(--color-tab-nav-border);
					//margin-bottom: -4px;

					&::before {
						content: "";
						position: absolute;
						left: -7px;
						bottom: 0px;
						height: 7px;
						width: 7px;
						//background: url(../img/bend.svg) top left;
					}

					&::after {
						content: "";
						position: absolute;
						right: -7px;
						bottom: 0px;
						height: 7px;
						width: 7px;
						//background: url(../img/bend.svg) top right;
					}

					button {
						color: var(--color-tab-text-active);

						.icon {
							color: var(--color-tab-icon-active);
						}

						.btnItemTabClose {
							opacity: 1;
						}

						.name {
							font-weight: 500;
						}
					}
				}

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

				button {
					display: flex;
					align-items: center;
					border: 0;
					//margin: 0 5px;
					border-radius: 5px 5px 0px 0px;
					border-radius: 7px;
					background-color: transparent;
					color: var(--color-tab-text);
					gap: 8px;

					&:hover {

						.name,
						.icon {
							color: var(--color-tab-text-hover);
						}
					}

					.name {
						text-align: left;
						line-height: 12px;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						opacity: 0;
						// max-width: 100px;
					}

					.icon {
						color: var(--color-tab-icon);
						padding: 0;
						font-size: 16px;
					}
				}

				.btnItemTab {
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					background: transparent;
					border: none;
					position: relative;
					overflow: hidden;

					.icon {
						padding: 0;
						margin: 0;
						font-size: 16px;
						line-height: 1;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.name {
						display: none;
					}
				}

				.btnItemTabClose {
					display: none !important;
				}

				&.dragging {
					opacity: 0.5;
					cursor: grabbing;
				}

				&.drag-over {
					border: 2px dashed var(--color-tab-icon-active);
					background-color: var(--color-tab-hover-bg);
				}
			}
		}

		.menuNav {
			position: fixed;
			top: 8px;
			right: 16px;
			z-index: 1000;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 2px;
			background: var(--color-body-module);
			border-radius: 24px;
			padding: 4px 8px;
			//box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

			button {
				border: 0px;
				background: transparent;
				cursor: pointer;
				position: relative;
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;

				.icon {
					font-size: 18px;
					padding: 0;
					color: var(--color-btn);
				}

				&:hover {
					background: var(--color-bg-gray-hover);

					.icon {
						color: var(--color-hover-btn-menu);

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

			.innerMenuNav {
				display: flex;
				align-items: center;
				flex-direction: row;
				gap: 8px;
			}

			.colapseSidebarMenu {
				background: transparent;
				border: 0;
				font-size: 20px;
				color: var(--color-primary);
				cursor: pointer;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				border-radius: 50%;

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

				&.on {
					color: var(--color-menu-top-btn);
				}
			}

			.menu {
				&[state="1"] {
					.icon {
						color: var(--color-hover-btn-menu);
					}
				}
			}

			.notifications {
				.icon {
					font-size: 20px;
					top: 1px !important;
					right: 3px !important;
				}
			}

			.task {
				.icon-point {
					right: 2px !important;
					top: 1px !important;
				}
			}

			.iconPoint {
				.icon-point {
					position: absolute;
					top: -13px;
					right: -1px;
					font-size: 11px;
					color: var(--alert-danger);
				}
			}

			.profileNav {
				border-radius: 50%;
				width: 32px;
				height: 32px;
				border: 0px;
				color: var(--color-btn-text-profile);
				background: var(--color-btn-profile);
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				cursor: pointer;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.menuNavFooter{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8px;

			button {
				border: 0px;
				background: transparent;
				cursor: pointer;
				position: relative;
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;

				.icon {
					font-size: 18px;
					padding: 0;
					color: var(--color-btn);
				}

				&:hover {
					background: var(--color-bg-gray-hover);

					.icon {
						color: var(--color-hover-btn-menu);

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

	.entityInitial  {
				//background: var(--color-primary, #3b82f6);
				color: var(--color-white, #fff);
				font-size: 16px;
				font-weight: 600;
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100px;
				font-size: 14px;
			}

	.boxEntities {
		.widthAvailable();
		display: flex;
		//margin-right: 5px;
		//border: 1px solid var(--color-line-soft);
		border-radius: var(--border-radius-form);

		.name {
			//background: var(--color-white);
			color: var(--color-text-entity);
			font-size: 12px;
			padding: 4px;
			//border-radius: var(--border-radius-btn);
			display: flex;
			align-items: center;
			//display: none;
		}

		.code {
			background: var(--color-white);
			color: var(--color-text-entity);
			font-size: 12px;
			padding: 4px;
			border-radius: var(--border-radius-btn);
			display: flex;
			align-items: center;
		}

		.item-select {
.widthAvailable();
			display: flex;
			align-items: center;
			overflow-x: hidden;
			//padding: 0 4px; // background: @bgSelectEntitie;
			height: 32px;
			border-radius: 4px;
			cursor: pointer;

			span {
				display: none;
			}

			.entityAvatar {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				border-radius: 40px;
				flex-shrink: 0;
				line-height: 1;
			}

			img.entityAvatar {
				object-fit: cover;
			}

			.entityInitial.entityAvatar {
				background: var(--color-primary, #3b82f6);
				color: var(--color-white, #fff);
				font-size: 16px;
				font-weight: 600;
			}

			.icon {
				color: var(--color-select);
			}
		}

		.innerEntities {
			background-color: var(--color-white);
			border-radius: 8px;
			box-shadow: 0px 2px 10px rgba(0,0,0,0.12);
			position: absolute;
			top: 36px;
			width: 180px;
			z-index: 9999;
			padding: 4px;
			display: none;
			flex-direction: column;

			&.on {
				display: flex;
			}

			.item {
				display: flex;
				align-items: center;
				border-radius: 5px;
				background: var(--color-white);
				cursor: pointer;
				.widthAvailable();
				padding: 5px 6px;
				gap: 6px;
				justify-content: space-between;

				&:hover {
					background: var(--color-select-entity-hover);

					.icon {
						color: var(--color-select);
					}
				}

				&.on {
					background: var(--color-select-entity);

					.icon {
						color: var(--color-select);
					}
				}

				.entityName {
					font-size: 12px;
					line-height: 1;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.entity-info {
					display: flex;
					align-items: center;
					gap: 8px;
					min-width: 0;
					flex: 1;
				}

				.icon {
					font-size: 12px;
					color: var(--color-text-soft, #ccc);
					flex-shrink: 0;
				}

				.entityAvatar {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 22px;
					height: 22px;
					border-radius: 40px;
					flex-shrink: 0;
					line-height: 1;
				}

				img.entityAvatar {
					object-fit: cover;
				}

				.entityInitial.entityAvatar {
					background: var(--color-primary, #3b82f6);
					color: var(--color-white, #fff);
					font-size: 12px;
					font-weight: 600;
				}
			}
		}
	}
}

.sidebar {
	position: fixed;
	/* border: 1px solid red; */
	width: calc(100vw - var(--width-nav));
	//width: 100dvw;
	height: 100vh;
	height: 100dvh;
	display: flex;
	top: 0;
	right: 0;
	pointer-events: none;
	opacity: 0;
	transition: all ease 0.1s;

	&.on {
		pointer-events: auto;
		transition: all ease 0.1s;
		opacity: 1;

		.innerMenu {
			transition: all ease 0.2s;
			left: 0;
		}

		.bg {
			transition: all ease 0.2s;
		}
	}

	.innerMenu {
		width: 300px;
		/* height: calc(100dvh - 66px);
		height: -moz-available;
		height: fill-available; */

		height: 100dvh;
		margin: 0;
		border-left: 1px solid #dedee0;
		overflow-y: auto;
		display: flex;
		position: absolute;
		border-radius: 0px;
		top: 0px;
		right: -270px;
		background: var(--color-white);
		z-index: 2;
		transition: all ease 0.3s;
		flex-direction: column;

		.innerMenuNav {
			border-bottom: 1px solid var(--color-line);
			margin-bottom: 8px;
			padding: 16px;

			.task {
				.icon-point {
					right: -5px !important;
					top: -14px !important;
				}
			}

			.iconPoint {
				.icon-point {
					position: absolute;
					top: -13px;
					right: -1px;
					font-size: 11px;
					color: var(--alert-danger);
				}
			}

			button {
				border: 0px;
				background: transparent;
				cursor: pointer;
				position: relative;

				.icon {
					font-size: 18px;
					padding: 8px 4px;
					color: var(--color-btn);
				}
			}
		}

		.boxEntities {
			margin-top: 8px;
			margin-left: 16px;
			width: 89%;
			position: relative;
		}

		.elem {
			.widthAvailable();
			padding: 8px 16px 16px;
			border-bottom: 1px solid var(--color-bg-gray);
			display: inline-block;

			label {
				font-size: 12px;
				margin-top: 4px;
				margin-bottom: 8px;
				display: block;
				color: var(--color-sidebar-title);
			}

			&.elem-administrator {
				border-bottom: 0;
			}

			&.elem-list {
				.inner {
					flex-direction: column;

					.item {
						width: 100%;

						.btnItemMenu {
							padding: 4px 0;
							flex-direction: row;
							border-radius: 5px;
							//margin-bottom: 4px;
							padding-bottom: 4px;

							&:hover {
								background-color: var(--color-bg-btn-menu);
							}

							i {
								font-size: 16px;
								width: auto;
								height: auto;
								background: transparent;
								border: 0px;
								margin: 0;
								/* margin-top: -1px; */
								padding: 4px 8px 4px 8px;
							}

							span {
								font-size: 14px;
								margin-left: 4px;
							}
						}
					}
				}
			}

			.inner {
				width: 100%;
				// border: 1px solid;
				display: flex;
				justify-content: left;
				flex-wrap: wrap;

				.item {
					width: 33%;

					button {
						.widthAvailable();
						height: 100%;
						display: flex;
						flex-direction: column;
						background-color: var(--color-white);
						border: 0;
						padding: 8px;
						/* justify-content: center; */
						align-items: center;
						cursor: pointer;

						&:hover {
							i {
								border: 2px solid rgb(119, 123, 156);
								//background:rgb(76, 79, 100);
								//color:var(--color-white) !important;
							}

							span {
								color: var(--color-text-btn-hover);
							}
						}

						i {
							font-size: 24px;
							width: 40px;
							height: 40px;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 5px;
							margin-bottom: 4px;
							background: #f1f1fb;
							border: 1px solid rgba(150, 166, 190, 0.2);
							box-sizing: border-box;
							border-radius: 5px;
						}

						span {
							font-size: 12px;
							color: var(--color-text-btn);
						}
					}
				}
			}

			&.elem-systems {
				.inner {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 4px;

					.item {
						//width: 33%;
						.widthAvailable();

						.btnItemMenu {
							display: flex;
							flex-direction: row;
							background-color: transparent;
							border: 1px solid transparent;
							border-radius: var(--border-radius);
							padding: 0;
							/* justify-content: center; */
							align-items: flex-start;
							cursor: pointer;
							gap: 4px;

							&:hover {
								background-color: var(--color-bg-btn-menu);

								i {
									border: 1px solid var(--color-bg-btn-menu);
									//background-color: var(--color-white);
								}

								span {
									color: var(--color-black) !important;
								}
							}

							i {
								font-size: 16px;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 7px;
								margin-bottom: 0;
								padding: 8px 8px;
								border: transparent;
								box-sizing: border-box;
								background-color: var(--color-bg-btn-menu);
								width: 30px;
								height: 30px;
							}

							span {
								font-size: 12px;
								text-align: left;
								color: var(--color-text-btn);
								display: flex;
								.widthAvailable();
								align-items: center;
								justify-content: flex-start;
								height: -webkit-fill-available;
								height: -moz-available;
								height: fill-available;
								text-align: left;
							}

						}
					}
				}
			}
		}
	}

	.bg {
		position: absolute;
		/* border       : 1px solid red; */
		width: 100%;
		height: 100%;
		z-index: 0;
		top: 0;
		left: 0;
		background-color: rgba(115, 118, 128, 70%);
		transition: all ease 0.2s;
	}
}

.profileMenu {
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.26);
	min-width: 270px;
	opacity: 0;
	transition-duration: 200ms;
	transform: translate(0px, 0px);
	max-height: 870px;
	position: fixed;
	min-height: 100px;
	background: white;
	right: 8px;
	top: 52px;
	border-radius: 5px;
	pointer-events: none;

	&.on {
		transition-duration: 200ms;
		transform: translate(0px, 4px);
		min-height: 0px;
		opacity: 1;
		pointer-events: all;
	}

	.block {
		border-top: 1px solid var(--color-line);
		padding: 16px;
		display: flex;
		width: -webkit-fill-available;
		width: -moz-available;
		width: fill-available;
		flex-direction: column;

		.btn {
			&:hover {
				color: var(--color-primary) !important;
			}
		}

		&.perfil {
			flex-direction: row;

			.img {
				overflow: hidden;
				width: 48px;
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100px;
				background: #fbd8a6;
				font-weight: 700;
				color: #8c7f7f;

				img {
					width: 48px;
					height: 48px;
				}
			}

			.text {
				display: flex;
				flex-direction: column;
				padding-left: 8px;

				.name {
					display: flex;
					align-items: center;
					font-size: 14px;

					.btn {
						font-size: 16px;
					}
				}

				.email {
					font-size: 12px;
					opacity: 0.5;
				}
			}
		}

		&.blockRol {
			flex-direction: row;

			label {
				font-size: 11px;
				padding: 4px 8px;
				border-radius: 20px;
				background-color: #c9cdda;
				color: var(--color-white);
				margin-right: 8px;
				margin-left: 4px;
			}
		}

		&.blockMenu {
			.btn {
				padding-left: 4px;
				font-size: 14px;
				opacity: 1;
			}
		}

		&.blockOut {
			padding: 8px 16px;

			.btnIcon {
				font-size: 14px;
				opacity: 1;
				padding-left: 0;

				.icon {
					font-size: 18px;
					padding-right: 4px;
				}
			}
		}
	}
}

.colapseSidebarMenu {
	background: transparent;
	border: 0;
	font-size: 24px;
	color: var(--color-primary);
	background: transparent;
	border: 0;
	padding: 4px 4px;
	margin-left: 4px;
	font-size: 20px;
	margin-top: -4px;
	cursor: pointer;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	&.on {
		//opacity: 0.3;
		color: var(--color-menu-top-btn);
	}
}

.menuTopModule {
	width: 100%;
	height: 38px;
	background: var(--color-tab-bg-menu-top);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color-submenu-top);
	border: 1px solid var(--color-line-menu-top);
	border-left: 0;

	.menuTopHeader {
		display: flex;
		align-items: center;
		height: 100%;
		padding-left: 8px;

		button {
			background: transparent;
			border: 0;
			font-size: 24px;
			color: var(--color-menu-top-btn);
			background: transparent;
			border: 0;
			padding: 4px 4px;
			margin-left: 4px;
			font-size: 20px;
			margin-top: -4px;
			cursor: pointer;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			&.on {
				opacity: 0.3;
			}
		}

		.titleMenuTop {
			font-size: 0.9rem;
			color: var(--color-menu-top);
			display: flex;
			margin-left: 8px;
			align-items: center;

			.icon {
				//visibility: hidden;
				font-size: 20px;
				margin-left: 0;
				margin-right: 8px;
			}

			.title {
				span {
					font-size: 11px;
				}
			}

			h4 {
				line-height: 10px;
			}
		}
	}

	.btn {
		color: var(--color-submenu-top);

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

		&.active {
			.fontBold();
		}
	}

	.btnMenuTop {
		font-size: 20px;
		margin: 0 4px;
	}

	.menuTopRight {
		display: flex;
		align-items: center;
		width: auto;
		justify-content: space-between;

		.left {
			padding-left: 8px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.right {
			padding-right: 16px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.head {

			justify-content: center;
			display: flex;
			color: var(--color-menu-top);
			gap: 8px;
		}


		a {
			margin-left: 4px;

			&.active {
				.icon {
					color: var(--color-primary);
				}

			}
		}

		.btn {
			color: var(--color-menu-top-right);
		}

		.icon {
			color: var(--color-menu-top);
			font-size: 19px;

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

	.menuTopLeft {
		width: 192px;
		padding-left: 8px;
		overflow-x: hidden;
		border-right: 1px solid var(--color-line-menu-top);

		&.on {
			width: 37px;
		}
	}

	.menuTopMedium {
		display: flex;
		align-items: center;

		ul {
			display: flex;
			align-items: center;
			flex-direction: row;
		}


		.head {
			border-left: 1px solid var(--color-line-menu-top);
			padding: 8px 8px 8px 8px;
			color: var(--color-text);
			display: flex;
			align-items: center;
			gap: 8px;

			.icon {
				font-size: 18px;
			}

			span {
				font-size: 13px;
				font-weight: bold;
			}
		}

	}

	.boxRol {
		background: #667080;
		border-radius: 5px;
		color: #adb2c1;
		padding: 4px 8px;
		font-weight: 600;
		font-size: 0.85em;
	}
}

.boxModule {
	.widthAvailable();
	.heightAvailable();
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	>.inner {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.sidebarMenuModule {
		width: 47px;
		// height: 100%;
		display: flex;
		margin-left: 0;
		transition: all ease 0.05s;
		flex-direction: column;
		background: var(--color-sidebar);
		//box-shadow: inset -1px 0px 7px var(--color-line-menu-top);
		border-left: 1px solid var(--color-line-soft);
		outline: 1px solid var(--color-white);
		cursor: pointer;
		flex-direction: column;
		z-index: 11;
		justify-content: space-between;
		padding-bottom: 16px;


		&.on {
			transition: all ease 0.05s;
			width: 200px;

			.head {
				label {
					display: block;
				}
			}

			.tbody {
				li {
					>a {
						overflow-x: hidden;

						span {
							display: inline-block;
						}
					}
				}

			}

			.titleMenuInner {

				h4 {
					overflow-x: hidden;
					width: 100%;
					transition: all ease .1s;
					height: auto;
				}

				p{
					display: block !important;
				}

			}
		}

		.head {
			.widthAvailable();

			display: flex;
			align-items: flex-start;
			padding: 8px;
			margin: 8px 0;

			.icon {
				font-size: 25px;
				margin-left: -4px;
			}

			label {
				font-size: 17px;
				font-weight: 700;
				margin-left: 4px;
				margin-top: 4px;
				width: 76%;
				display: none;
				color: var(--color-sidebar-title);
			}
		}

		.titleMenuInner {
			font-size: 0.9rem;
			color: var(--color-menu-top);
			display: flex;
			margin-left: 4px;
			padding-top: 4px !important;
			padding-bottom: 8px !important;
			align-items: center;
			width: 0;
			justify-content: space-between;
			gap: 6px;

			&:hover {
				.btnCloseSidebar {
					opacity: 1 !important;
				}
			}

			.name {
				display: flex;
				align-items: flex-start;
				min-width: 0;
				flex: 1;
			}

			.action {
				display: inline-flex;
				align-items: center;

				#btnCloseSidebar,
				.btnCloseSidebar {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 18px;
					height: 18px;
					padding: 0;
					border: 0;
					border-radius: 50%;
					background: transparent;
					cursor: pointer;
					opacity: 0;
					transition: opacity 0.2s ease;

					.icon {
						font-size: 14px;
						margin: 0;
						color: var(--color-btn);
					}

					&:hover {
						background: var(--color-bg-gray-light);

						.icon {
							color: var(--color-hover-btn-menu);
						}
					}
				}
			}

			.icon {
				display: flex;
				font-size: 20px;
				margin-left: 0;
				margin-right: 8px;
			}

			h4 {
				width: 0px;
				line-height: 20px;
				overflow: hidden;
				transition: all ease .1s;
				height: auto;
			}

			
		}

		.tbody {
			display: flex;
			flex-direction: column;
			margin-top: 10px;
			padding-left: 4px;
			padding-right: 2px;

			.moduleGroupTitle {
				display: flex;
				padding: 8px 10px 4px 8px;
				margin-top: 6px;

				span {
					display: none;
					font-size: 11px;
					font-weight: 400;
					letter-spacing: 0;
					text-transform: none;
					color: var(--color-sidebar-title);
					opacity: 0.75;
				}
			}

			li {
				display: flex;
				width: -webkit-fill-available !important;
				width: -moz-available !important;
				width: fill-available !important;
				padding: 0 8px 0 4px;

				>a {
					display: flex;
					align-items: end;
					justify-content: flex-start;
					text-align: left;
					width: -webkit-fill-available;
					width: -moz-available;
					width: fill-available;
					padding: 2px; //margin-bottom: 4px;
					font-weight: 400;
					align-items: center;
					gap:0;

					&.active {
						background-color: var(--color-sidebar-active-bg);

						span {
							color: var(--color-sidebar-active-text);
							font-weight: 500;
						}
					}

					.icon {
						color: var(--color-sidebar-icon);
						font-size: 16px;
						padding: 4px; //margin-right: 5px;
					}

					span {
						color: var(--color-label-form);
						font-size: 0.80rem;
						// margin-top: 1px;
						margin-left: 4px;
						display: none;
						min-width: 200px;
					}
				}
			}

			.titleMenuTop {
				align-items: center;

				.title {
					p {
						font-size: 11px;
						line-height: 14px;
						display:none;
					}
				}
			}
		}

		.footerSidebarMenuModule {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;

			.colapseSidebarMenu {
				margin-left: 8px;
			}

			.btn {
				display: flex;
				padding: 4px 16px;
				color: var(--color-close-modal);

				.icon {
					font-size: 1.05rem;
				}

				span {
					display: none;
				}
			}
		}

		// Estado colapsado del sidebar: ocultar textos y centrar iconos también en el footer
		&.on {
			.tbody {
				.moduleGroupTitle {
					span {
						display: inline-block;
					}
				}
			}

			.footerSidebarMenuModule {
				gap: 4px;

				.btn {
					.widthAvailable();
					justify-content: flex-start;
					align-items: center;
					padding: 4px 16px;
					color: var(--color-close-modal);

					.icon {
						font-size: 1.05rem;
					}

					span {
						display: inline-block;
						font-size: 0.85rem;
					}
				}

			}
		}
	}

	.bodyModule {
		.widthAvailable();
		.heightAvailable();
		overflow-x: hidden;
		// overflow-y: auto;
		position: relative;
		background: var(--color-body-module);

		&::-webkit-scrollbar {
			width: 0px;
		}

		.inner {
			width: 100%;
			height: 100%;
			position: relative;

			left: 0;

			&.on {
				left: -100%;
			}
		}

		.innerContainer {
			margin: 0 auto;
			max-width: 1024px;
		}

		.headInnerForm {
			width: 100%;
			display: flex;
			// border-bottom: 1px solid #efefef;
			// background   : #dfdfe2;

			.container {
				padding: 16px 0 !important;

				.box-rigth {
					display: flex;
				}
			}

			.inner {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 8px 0;

				.box{
					display: flex;
					align-items: center;
					gap:8px;
				}
			}
		}

		.tbodyForm{
			padding-top: 70px;
		}



		>.tbody {
			overflow-y: auto;
			max-height: auto;

			&.off {
				max-height: 400px;
				overflow-y: hidden;
			}
		}
	}
}

.mobileNavToggle {
	position: fixed;
	left: 10px;
	bottom: 12px;
	bottom: calc(12px + constant(safe-area-inset-bottom));
	bottom: calc(12px + env(safe-area-inset-bottom));
	display: none;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	padding: 8px 16px 8px 50px;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 600;
	box-shadow: 0px 15px 35px rgba(38, 43, 82, 0.12);
	z-index: 320;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;

	.icon {
		font-size: 24px;
	}

	.brandLogo {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		object-fit: cover;
		position: absolute;
		left: 7px;
	}

	.label {
		font-size: 0.85rem;
		display: none;
	}

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

@supports (-webkit-touch-callout: none) {
	@media (max-width: 1024px) {
		.mobileNavToggle {
			bottom: 10px;
			bottom: calc(10px + constant(safe-area-inset-bottom));
			bottom: calc(10px + env(safe-area-inset-bottom));
		}
	}
}

.mobileNavOverlay {
	display: none;
}

.mobileNav-open {
	overflow: auto;
}

.mobileNav-open .mobileNavToggle {
	background-color: var(--color-bg-gray-hover);
}

.mobileNav-open .mobileNavToggle .label {
	display: inline-flex;
}

//@Media
@media (max-width: 1920px) {}

@media (max-width: 1445px) {}

@media (max-width: 1280px) {}

@media (max-width: 470px) {
	nav {
		.innerNav {
			.navTabs {
				.tabsNavList {
					.itemTabNav {
						width: auto;
					}
				}
			}
		}
	}

}

@media (max-width: 850px) and (max-height: 470px) {
	.navTabs {
		width: auto !important;
	}
}

@media (max-width: 1024px) {
	nav {
		.innerNav {
			.navTabs {
				width: 100%;
				padding: 10px 8px 0;
				gap: 6px;

				.tabsNavList {
					.itemTabNav {
						width: 100%;
						height: 34px;
						border-radius: 8px;

						.btnItemTabClose {
							display: none;
						}
					}
				}

				.boxTabsMobile {
					display: block;

					.boxTabMobil {
						position: fixed;
						left: 0;
						top: 0;
						width: 320px;
						max-width: 85vw;
						height: 100dvh;
						background: var(--color-white);
						box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
						z-index: 1400;
						display: none;
						flex-direction: column;

						&.on {
							display: flex;
						}

						.inner {
							flex: 1;
							overflow-y: auto;
							padding: 12px;
							display: flex;
							flex-direction: column;
							gap: 8px;

							.itemTabNav {
								width: 100%;
								height: 38px;
								border-radius: 8px;
								background: var(--color-bg-gray-light);
								padding: 0 8px;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.btnItemTab {
									width: auto;
									height: 100%;
									justify-content: flex-start;
									gap: 8px;

									.icon {
										position: static;
										transform: none;
										font-size: 14px;
									}

									.name {
										display: inline-block;
										opacity: 1;
										font-size: 13px;
									}
								}

								.btnItemTabClose {
									position: static;
									opacity: 1;
									pointer-events: auto;
									display: inline-flex;
									width: 24px;
									height: 24px;
									background: transparent;
									border: 0;
								}
							}
						}

						.actions {
							padding: 8px 12px 12px;
							border-top: 1px solid var(--color-line-soft);

							.btnCerrarTabMobil {
								.widthAvailable();
								text-align: center;
							}
						}
					}
				}
			}
		}
	}

	.mobileNavToggle {
		display: inline-flex;
	}

	.mobileNavToggle .label {
		display: inline-flex;
	}

	nav {
		display: none;


		.sidebar {
			display: none !important;

			.colapseSidebarMenu {
				display: none;
			}
		}

		.menuNav {
			padding-bottom: 60px;
			padding-bottom: calc(60px + constant(safe-area-inset-bottom));
			padding-bottom: calc(60px + env(safe-area-inset-bottom));
		}
	}

	.colapseSidebarMenu {
		display: none !important;
	}

	body.mobileNav-open nav {
		display: flex !important;
	}

	.workspace {
		width: 100% !important;
		padding-left: 0 !important;
	}

	body.mobileNav-open .workspace {
		width: calc(100vw - var(--width-nav)) !important;
		width: calc(100dvw - var(--width-nav)) !important;
	}

	.boxModule {
		width: 100% !important;
		height: 100%;
	}

	.boxModule .sidebarMenuModule {
		display: none !important;

		.colapseSidebarMenu {
			display: none !important;
		}
	}

	body.mobileNav-open .boxModule .sidebarMenuModule {
		display: flex !important;
	}

	.profileMenu {
		top: auto;
		bottom: 70px;
		right: auto;
		left: 50px;
		border-radius: 7px;
	}

	.sidebar {
		right: auto;
		left: 48px;
		z-index: 1040;

		&.on {
			display: flex !important;
		}
	}
}