// out: ./dist/form.css

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

.form {
	position: relative;
	z-index: 0;
	.widthAvailable();
	.heightAvailable();
	display: flex;
	flex-direction: column;
	padding: 4px;
	gap: var(--gap-space);
	//*padding-left: 25px;
	//*padding-right: 25px;

	&.formLineal {
		padding-left: 0;
		padding-right: 0;
	}

	>.head {
		font-size: 15px;
		font-weight: 500;
		margin-top: 16px;
		margin-bottom: 8px;
	}

	&.formSlim {
		padding-left: 16px;
		padding-right: 16px;
	}

	&.formNoBottom {
		margin-bottom: 8px !important;

		.formControl:last-child {
			margin-bottom: 8px !important;
		}
	}

	>.formControl:last-child {
		margin-bottom: 40px !important;

		&.formControlActionBottomWindow {
			margin-bottom: 0;
			padding-bottom: 80px !important;
		}
	}

	.titleSeparator {
		.widthAvailable();
		margin: 16px 0 4px 0;
		padding-top: 4px;
		font-size: 16px;
	}

	// ─── Horizontal radio group (segmented control) ───────────────────────────
	.formRadioGroup {
		.formRadioGroupLabel {
			display: block;
			font-size: 13px;
			color: var(--color-text-muted, #888);
			margin-bottom: 6px;
		}

		.radioGroupOptions {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 0;
			border: 1px solid var(--color-line, #e0e0e0);
			border-radius: var(--border-radius-btn, 8px);
			overflow: hidden;
			width: fit-content;

			.radioGroupOption {
				display: flex;
				align-items: center;
				padding: 7px 20px;
				cursor: pointer;
				font-size: 14px;
				color: var(--color-text);
				background: var(--color-default, #fff);
				border-right: 1px solid var(--color-line, #e0e0e0);
				transition: background 0.15s, color 0.15s;
				user-select: none;
				white-space: nowrap;

				&:last-child {
					border-right: none;
				}

				input[type="radio"] {
					position: absolute;
					opacity: 0;
					width: 0;
					height: 0;
					pointer-events: none;
				}

				span {
					pointer-events: none;
				}

				&:hover:not(.active) {
					background: var(--color-btn-default-hover, #f5f5f5);
				}

				&.active {
					background: var(--color-btn-primary);
					color: var(--color-white, #fff);
					font-weight: 500;
				}
			}

			&.typePills {
				border: none;
				overflow: visible;
				border-radius: 0;
				gap: 8px;
				width: auto;
				background: transparent;

				.radioGroupOption {
					border: 1px solid var(--color-line, #e0e0e0);
					border-right: 1px solid var(--color-line, #e0e0e0);
					border-radius: var(--border-radius-btn, 8px);
					padding: 6px 16px;
					font-size: 13px;
					background: var(--color-default, #fff);

					&:last-child {
						border-right: 1px solid var(--color-line, #e0e0e0);
					}

					&:hover:not(.active) {
						background: var(--color-btn-default-hover, #f5f5f5);
						border-color: var(--color-text-muted, #aaa);
					}

					&.active {
						background: var(--color-btn-primary);
						color: var(--color-white, #fff);
						border-color: var(--color-btn-primary);
						font-weight: 500;
					}
				}
			}
		}
	}

	// ──────────────────────────────────────────────────────────────────────────

	.formBoxPills {
		display: flex;
		flex-direction: row;
		gap: 8px;

		.pill {
			display: flex;
			align-items: center;
			padding: 8px 16px 8px 16px;
			background: var(--color-bg-gray);
			border-radius: 20px;
			position: relative;
			margin-bottom: 8px;

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

			span {
				cursor: pointer !important;
			}

			.btnClosePill {
				position: absolute;
				right: -7px;
				top: -7px;
				border: 0;
				background: white;
				border-radius: 40px;
				padding: 4px !important;
			}

		}
	}

	.settings {
		margin-top: 8px;
	}

	.formControl {
		.widthAvailable();
		display: flex;
		flex-direction: column;
		position: relative;
		//margin-bottom: 10px;
		z-index: 1;
		gap: 4px;

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

		>label {
			font-size: 0.85em;
			margin-top: 0;
			display: flex;
			color: var(--color-form-label);

			a {
				color: var(--text-color);

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


			.widthAvailable();
			padding-right: 4px;

			&.noMargin {
				margin-bottom: 0;
			}

			&.space-between {
				justify-content: space-between;
			}
		}

		>.head {
			font-size: 14px;
			font-weight: 400;
		}

		.formInput {
			.widthAvailable();
			padding: 4px 8px;
			display: flex;
			z-index: 0;
			background: var(--color-input-bg);
			color: var(--color-input-text);
			border: 1px solid var(--color-input-border);
			.fontRegular();
			//box-shadow: 0px 0px 0px 1px transparent !important;
			// box-shadow: 0px 0px 1px 1px #cecece !important;
			border-radius: var(--border-radius);
			font-size: 13px;
			min-height: 18px;
			transform: all ease 0.2s;
			 

			&[type="date"] {
				display: block;
				cursor: pointer;

				&::-webkit-calendar-picker-indicator {
					cursor: pointer;
					opacity: 0.7;
				}

				&::-webkit-date-and-time-value {
					text-align: left;
				}
			}

			&:focus {
				background-color: var(--color-input-focus);
			}

			&.btn {
				font-weight: 700;
			}

			&.textRight {
				text-align: right;
			}

			&.btnSmall {
				font-size: 15px !important;
				padding: 8px 16px !important;
			}

			&.formTitle {
				margin-top: 8px;
				margin-bottom: 16px;
			}

			.helpBlock {
				a {
					display: block;
					text-align: center;
				}
			}

			&:hover {
				border-color: var(--color-blue);
				box-shadow: 0px 0px 0px 1px var(--color-blue) !important;
				transform: all ease 0.2s;
			}

			&.formInputLg {
				font-size: 18px;
				padding: 8px 16px;
			}

			&.error {
				border-color: var(--alert-danger);
				box-shadow: 0px 0px 0px 1px var(--alert-danger) !important;
				transform: all ease 0.2s;
			}

			&.disabled {
				background-color: var(--color-bg-inpud-disabled);
			}
		}

		&.formControlNoMargin {
			margin-bottom: 0;
		}

		&:last-child {
			//margin-bottom: 0px;
		}

		.reference {
			font-size: 13px;
			margin-bottom: 8px;
		}

		&.formFlex {
			display: flex;
			flex-direction: row !important;
			align-items: center;
			gap: 8px;
		}


		&.formFlexCenter {
			justify-content: center;
		}

		&.formFlexRight {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
		}

		&.formBottom {
			align-items: flex-start;
			gap: 0;
			margin-bottom: 8px !important;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			button {
				padding: 8px 24px;
			}
		}

		&.formBtns {
			// margin-top: 5px;
			margin-bottom: 16px !important;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
		}

		&.formLeft {
			justify-content: center;
			align-items: flex-start;
		}

		&.formRight {
			justify-content: center;
			align-items: flex-end;
		}

		.formControlHead {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;
			margin-top: 8px;

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

				label,
				span,
				div {
					margin-right: 4px;
				}
			}
		}

		&.formControlQuantity {
			.formGroup {
				position: relative;

				input {
					z-index: 0;
				}

				.btn {
					z-index: 1;
					bottom: 5px;
					right: 7px;
					position: absolute;
					font-size: 18px !important;
					padding: 0 8px 4px 8px !important;

					&.btnQuantityMinus {
						right: 45px;
					}

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

		&.formControlSelectAndOthers {
			.boxGroup {
				display: flex;
				flex-wrap: nowrap;

				select {
					width: 45%;
					margin-right: 8px;
				}

				input {
					width: 50%;
					display: none !important;

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

		&.formControlDate {
			flex-direction: row;
			align-items: center;
			z-index: 10;

			.icon {
				font-size: 19px;
				// margin-right: 10px;
			}

			.hours {
				display: flex;
				// margin-left: 10px;
			}
		}

		&.formControlIconSelect {
			.formInput {
				padding-left: 35px;
				padding-right: 35px;
			}

			.btnSelectIcon {
				position: absolute;
				bottom: 6px;
				z-index: 1;
				right: 10px;
				font-size: 18px;
			}

			.iconSelect {
				position: absolute;
				font-size: 20px;
				bottom: 9px;
				z-index: 1;
				left: 8px;
			}

			.boxSelectIcons {
				position: absolute;
				z-index: 3;
				border-radius: 5px;
				border: 1px solid #d1d2d4;
				background: #ffffff;
				box-shadow: 1px 1px 10px rgb(44 44 44 / 54%);
				display: flex;
				flex-direction: column;
				max-height: 240px;
				overflow-y: auto;
				bottom: 0px;
				left: 1px;

				a {
					.widthAvailable();
					padding: 4px 8px;

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

		&.formControlPrice {
			.money {
				position: absolute;
				left: 5px;
				bottom: 6px;
				font-weight: 500;
				z-index: 1;
				background: var(--color-white);
				border: 1px solid var(--color-line);
				padding: 4px 4px;
				border-radius: 4px;
				width: 25px;
			}

			.formInput {
				padding-left: 45px;
			}
		}

		&.formControlSelectPrice {
			.selectPrice {
				position: absolute;
				left: 7px;
				top: 40px;
				font-weight: 500;
				z-index: 1;
				border: 0;
				background: transparent;
				font-size: 16px;
			}

			.formInput {
				padding-left: 65px;
				font-size: 16px;
			}
		}

		&.formControlLineal {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
			gap: 8px;

			&.formLeft {
				justify-content: flex-start !important;
			}


		}

		&.formSelectList {
			z-index: 15;

			.boxInput {
				position: relative;

				.icon {
					position: absolute;
					right: 7px;
					font-size: 1.3em;
					top: 8px;
					color: var(--color-line);
					z-index: 1;
					pointer-events: none;
				}

				.formInput {
					z-index: 0;
					// padding-right: 30px;
				}
			}

			.boxSelectList {
				.widthAvailable();
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 4px;
				height: 0px;
				opacity: 0;
				margin-top: 0;
				box-shadow: 0px 4px 9px rgba(0, 0, 0, 30%);
				border: 1px solid var(--color-line);
				background: var(--color-white);
				border-radius: var(--border-radius-form);
				text-transform: capitalize;
				overflow-y: hidden;


				&.on {
					height: 250px;
					opacity: 1;
					position: absolute;
					z-index: 10;
					top: 65px;
				}

				.search {
					position: relative;

					.icon {
						position: absolute;
						top: 9px;
						left: 7px;
						font-size: 1.2em;
					}

					.formInput {
						padding-left: 30px;
					}
				}

				.list {
					display: flex;
					flex-direction: column;
					overflow-y: auto;
					margin-top: 8px;

					.btn {
						padding: 8px 4px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px dotted var(--color-line);
						.widthAvailable();

						span {
							text-align: left;
							font-size: 13px;
						}
					}
				}

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

		&.formSelectItems {
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.formInputSelect {
				display: inline-block;
				min-height: 33px;

				.boxInputPathUrl {
					display: flex;
					align-items: baseline;
					overflow-x: auto;
					flex-wrap: nowrap;
					overflow-y: hidden;
					width: 47.7%;
					height: 100%;
					padding: 0 8px;
					margin: 0;
					flex-basis: max-content;
					border-top-right-radius: 0px;
					border-bottom-right-radius: 0px;

				}
			}

			.boxInput {
				position: relative;

				.icon {
					position: absolute;
					right: 7px;
					font-size: 1.3em;
					top: 8px;
					color: var(--color-line);
					z-index: 1;
					pointer-events: none;
				}


			}

			.formPathurl {
				position: absolute;
				right: 0;
				top: 24px;
				/* border-top: 0px; */
				padding-right: 8px;
				width: 42%;

				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				font-size: 14px;
				color: #526176;
				padding-top: 8px;
				background: rgb(220 223 231);

			}

			.boxSelectList {
				position: relative;
				display: flex;
				flex-direction: column;
				.widthAvailable();
				padding: 4px;
				height: 0px;
				opacity: 0;
				border: 1px solid var(--color-line);
				border-radius: var(--border-radius-form);
				margin-top: -4px;
				background: var(--color-white);
				.boxShadow();

				&.on {
					height: 200px;
					opacity: 1;
				}

				.search {
					position: relative;

					.icon {
						position: absolute;
						top: 9px;
						left: 7px;
						font-size: 1.2em;
					}

					.formInput {
						padding-left: 30px;
					}
				}

				.list {
					display: flex;
					flex-direction: column;
					overflow-y: auto;
					margin-top: 8px;

					.btn {
						padding: 8px 8px;
						border-radius: 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px dotted var(--color-line);

						span {
							text-align: left;
							font-size: 13px;
						}
					}
				}
			}

			.boxInputContent {
				z-index: 0;
				padding-right: 30px;
				flex-wrap: wrap;
				padding-left: 0;
				padding-top: 0;
				min-height: 25px;

				.item {
					font-size: 12px;
					padding: 4px 16px;
					text-align: left;
					background: rgb(148 158 183);
					border-radius: 5px;
					color: var(--color-white);
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 8px;
					margin-top: 8px;
					position: relative;
					display: flex;


					span {
						pointer-events: none;
					}

					.btnRemoveItemSelect {
						.icon {
							position: relative;
							margin: 0;
							padding: 0;
							right: -7px;
							top: 2px;
							pointer-events: all;
							opacity: .5;

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

		&.formStateSwitch {

			.boxBtnStateSwitch {
				width: -webkit-fill-available;
				width: -moz-available;
				width: fill-available;
				padding: 16px 0;
				display: flex;
				align-items: center;

				.title {
					display: inline-block;
					font-weight: 500;
					overflow: hidden;
					text-overflow: ellipsis;
					vertical-align: top;
					width: 20%;
				}

				.btnStateSwitch {
					display: flex;
					align-items: center;
					position: relative;
					width: calc(var(--form-state-switch-width) * 2);

					&[state="1"] {
						.circle {
							right: 5px;
						}

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

					.circle {
						transition: border-color 0.3s ease;
						border: 10px solid #fafafa;
						border-radius: 100%;
						position: absolute;
						box-shadow: 1px 1px 3px rgba(0, 0, 0, 50%);
						z-index: 1;
					}

					.base {
						transition: border-color 0.3s ease;
						border: 7px solid #9aa0a6;
						border-radius: 7px;
						position: absolute;
						top: -7px;
						width: var(--form-state-switch-width);
						z-index: 0;
					}
				}

				.state {
					display: flex;
					align-items: center;
					margin-left: 4px;

					.icon {
						margin-left: 8px;
						margin-right: 8px;
						font-size: 21px;
						color: var(--color-btn-hover);

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

					.tbody {
						display: flex;
						align-items: center;
						margin-left: 8px;
					}

					.formControl {
						margin: 0;
					}
				}
			}
		}

		&.formControlList {
			margin-top: 16px;
			display: flex;

			.formCol {
				.col {
					padding: 4px 8px;
				}

				&.head {
					display: flex;
					justify-content: space-between;
					margin-bottom: 8px;
					border-bottom: 1px solid var(--color-line);
					padding-bottom: 4px;

					.col {
						font-size: 13px;
					}
				}

				&.tbody {
					display: flex;
					justify-content: space-between;
					.widthAvailable();

					.formItem {
						.widthAvailable();
						display: flex;
						flex-direction: column;

						img {
							max-height: 55px;
							max-width: 55px;
						}

						.input50w {
							width: 50px;
						}

						.value {
							display: flex;
							align-items: center;
							justify-content: center;
						}

						buttom {
							padding: 16px;
							font-size: 16px;
						}

						.col {
							&.colActions {
								display: flex;
								align-items: center;
							}
						}
					}
				}
			}
		}

		&.formCheckbox {
			margin-top: 16px;

			&:first-child div {
				margin-top: 8px;
			}

			&.formControlLineal {
				gap: 16px;

				.formCheckboxItem {
					margin-top: 8px;
					margin-bottom: 0;
				}
			}

			.formCheckboxItem {
				&:first-child {
					margin-top: 8px;
				}

				display: flex;
				align-items: center;
				min-height: 1rem;
				padding-left: 4px;
				margin-bottom: 8px;
				gap: 8px;

				.formCheckLabel,
				label {
					display: flex;
					align-items: center;

					.formInput {
						// margin-left: 7px;
						padding: 4px 8px;
						min-width: 180px;
					}
				}

				.formCheckInput {
					/* margin-left: 7px; */
					max-width: 30px;
					padding: 4px 8px;
				}

				.formInput {
					/* margin-left: 7px; */
					//margin-right: 10px;
					border-radius: 5px;
					width: 18px;
					height: 18px;
				}
			}
		}

		&.formControlCheck {

			>label {
				margin-bottom: 8px;
			}

			.formCheck {

				display: flex;
				align-items: center;
				min-height: 1rem;
				padding-left: 8px;
				margin-bottom: 8px;

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

					.formInput {
						margin-left: 8px;
						padding: 4px 8px;
						min-width: 180px;
					}
				}

				.formCheckInput {
					margin-top: 4px;
					margin-right: 8px;
					font-size: 14px;
					width: 16px;
					height: 16px;
				}

				.formInput {
					margin-left: 8px;
					padding: 4px 8px;
					width: 16px;
					height: 16px;
				}

				.formCheckLabel {
					font-size: 14px;
				}
			}
		}

		.message {
			//padding: 0 5px;
			font-size: 13px;

			&.on {
				margin: 8px 0;
			}

			&.error {
				span {
					background: var(--color-message-error);
					padding: 4px 8px;
					margin-top: 8px;
					display: inline-block;
					border-radius: 5px;
				}
			}

			&.medium {
				span {
					background: var(--color-message-medium);
					padding: 4px 8px;
					margin-top: 8px;
					display: inline-block;
					border-radius: 5px;
				}
			}

			&.heavy {
				span {
					background: var(--color-message-heavy);
					padding: 4px 8px;
					margin-top: 8px;
					display: inline-block;
					border-radius: 5px;
				}
			}
		}

		.checkboxControl {
			font-size: 16px;
			line-height: 20px;
			margin-bottom: 8px;
			display: flex;
			margin-left: 8px;
			align-items: flex-start;

			&.checkboxControlSmall {
				.checkboxControlLabel {
					font-size: 13px;
					line-height: 20px;
				}
			}

			.checkboxControlLabel {
				display: inline-block;
				font-size: 14px;
				align-items: center;
				margin: -4px 0 0 4px;
				padding: 0;
				padding-left: 4px;
				line-height: 16px;

				a {
					color: var(--color-text);
					margin-left: 4px;
					text-decoration: underline !important;
				}

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

		&.formControlMedium {
			margin-bottom: 8px !important;
		}


		&.formDuo {
			display: flex;
		}

		.titleSection {
			font-size: 21px;
		}

		&.formInputCalendar {
			label {
				margin-left: 38px;

				&.on {
					margin-left: 8px;
				}
			}

			.formInput {
				padding-left: 38px;
			}
		}

		&.formCheckOk {
			&.on {
				&::after {
					opacity: 1;
				}
			}

			&::after {
				content: var(--icon-check-ok);
				font-family: var(--font-icon-family);
				position: absolute;
				z-index: 10;
				color: var(--alert-success);
				font-size: 21px;
				width: 24px;
				height: 24px;
				bottom: 9px;
				right: 7px;
				opacity: 0;
			}
		}

		.inputWithIcon {
			position: relative;

			.icon {
				position: absolute;
				font-size: 1.3em;
				left: 7px;
				bottom: 7px;
			}

			.formInput {
				padding-left: 38px;
			}
		}

		&.formIconRight {
			position: relative;

			input {
				z-index: 0;
			}

			.btn {
				z-index: 1;
				position: absolute;
				bottom: 1px;
				right: 2px;
				border-radius: 0 4px 4px 0;
				padding: 4px;
				background: var(--color-btn-icon-input);
				border-color: var(--color-btn-icon-input);

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

			}
		}

		
	}

	.formGroup {
		display: flex;
		position: relative;
		width: 100%;
		gap: 16px;
		flex-direction: column;
		//margin-bottom: 7px;

		&.formGroupTwoColumns {
			display: flex;
			align-items: flex-start;
			justify-content: space-around;
			gap: 16px;
			flex-direction: row;
		}

		&.formGroupThreeColumns {
			display: flex;
			align-items: flex-start;
			gap: 16px;
			flex-direction: row;

			.formControl {
				flex: 1;
			}
		}

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

			&.nospace {
				padding: 0;
			}

			>label {
				font-size: 1.2em;
				font-weight: 600;
				// margin-bottom: 7px;
				display: inline-block;
			}

			.title {
				font-size: 14px;
				font-weight: 400;
			}


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

				.box {
					margin-left: 8px;
					display: flex;
					align-items: center;

					.btn {
						padding-left: 8px;
						padding-right: 8px;
					}
				}
			}
		}

		.box {
			display: flex;
		}
	}

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

	.formControlLine {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 0;

		&:last-child {
			margin-right: 0;
		}
	}

	.loader {
		border: 1px solid var(--color-blue-soft);
		padding: 4px;
		border-radius: 5px;
		display: flex;
		gap: 8px;
		align-items: center;

		.barLoader {
			width: 100%;
			height: 7px;
			border-radius: 10px;
			background: var(--color-default);
			display: flex;
			align-items: center;

			.bar {
				background: var(--color-dodgerblue);
				display: flex;
				height: 7px;
				border-radius: 5px;
			}
		}

	}

	.formUpFile {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 0;
		position: relative;
		min-height: var(--form-upload-height);
		//margin-bottom: 15px;

		.formPreview {
			.widthAvailable();
			z-index: 2;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			pointer-events: none;

			.item {
				position: relative;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.btnRemoveFileItem {
					position: absolute;
					top: -10px;
					right: -10px;
					z-index: 1;
					background: var(--color-white);
					/* padding: 3px; */
					border-radius: 20px;
					font-size: 21px;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2px solid var(--color-white);
					pointer-events: auto;

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

					}
				}

				img,
				video,
				iframe {
					border: 1px solid var(--color-line);
					max-height: var(--form-upload-height);
					width: 100%;
					height: 100%;
					object-fit: contain;
					border-radius: 3px;
				}

				&:focus-within,
				&:hover {

					img,
					video,
					iframe {
						box-shadow: 0 0 0 1px rgba(51, 105, 231, 0.35);
					}
				}

				&.item-svg {
					img {
						min-width: 120px;
						min-height: 120px;
					}
				}
			}
		}

		.inner {
			.widthAvailable();
			.heightAvailable();
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			border-radius: 7px;
			border: 2px dotted var(--color-line);
			pointer-events: none;
			opacity: 1;
			gap: 8px;
			background: #f9f9fe;


			&.on {
				border: 1px dotted var(--color-primary);
				background-color: var(--color-inner-upfile);

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

			.btn {
				background-color: var(--color-white) !important;
				border-radius: 7px;
				border-color: #e9e6ef !important;
				padding: 8px 8px !important;
			}

			.icon {
				font-size: 21px;
			}

			.message {
				font-size: 12px;
			}

			&.off {
				display: none;
			}
		}

		.inputUpFile {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 0;
			cursor: pointer;
		}

	}

	.formRadio {
		display: flex;
		align-items: center;
		margin-right: 8px;

		&:last-child {
			margin-right: 0;
		}

		input[type="radio"] {
			margin: 0 8px;
			align-items: center;
			width: 18px;
			height: 18px;
		}
	}

	.formDividerOr {
		.widthAvailable();
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.7;
		margin: 0.5em 0;
		position: relative;
		color: #d1d1d1;

		&::before {
			content: "";
			display: block;
			width: 40%;
			height: 1px;
			background: #d1d1d1;
			margin-right: 0.5em;
			position: absolute;
			left: 10px;
		}

		&::after {
			content: "";
			display: block;
			width: 40%;
			height: 1px;
			background: #d1d1d1;
			margin-left: 0.5em;
			position: absolute;
			right: 10px;
		}
	}

	.formFlex {
		display: flex;
		align-items: center;
		flex-direction: row !important;
		gap: 16px;

		&.formFlexColumn {
			flex-direction: column !important;

			div {
				.widthAvailable();
			}
		}

		&.formFlexSpaceBetween {
			justify-content: space-between;
		}

		.formCol {
			.widthAvailable();
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		>.btnIcon {
			padding: 8px;
		}
	}

	.formGroupFluid {
		.widthAvailable();
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.formCollapse {
		transition: all .3s ease;
		overflow: hidden;
		.heightAvailable();

		&.active {
			height: 0;
		}
	}

	.btnGroupCollapse {
		&.active {
			transform: rotate(180deg);
		}
	}

	.formGroupFrame {
		background-color: var(--color-white);
		border-radius: var(--border-radius-form);
		padding: 16px 16px 16px;
		box-shadow: 0px 1px 2px #b3bfd5;
		display: flex;
		gap: 16px;
		flex-direction: column;

		>label {
			font-size: 1em;
			font-weight: 600;
			//margin-bottom: 7px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.head {
			padding: 0 0 0 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			>label {
				font-size: 14px;
				font-weight: 600;
				display: flex;
				align-items: center;
				gap: 8px;
			}

			&.no-margin {
				padding-bottom: 0;
				margin: 0;
			}

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

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

	.formControlLandscape {
		display: flex !important;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		flex-direction: row;

		.formControl {
			//padding-right: 10px;

			&.formControlIconSelect {
				.btnSelectIcon {
					right: 18px;
				}

				.iconSelect {
					bottom: 7px;
				}
			}

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

	.formSelect {
		&::after {
			/*content: "\E80B";
            width: 20px;
            height: 20px;
            bottom: 10px;
            right: 0px;
            margin-right: 16px;            position: absolute;
            background-color: #ffffff;
            font-family: "font-brave" !important;
            display: flex;
            align-items: center;
            pointer-events: none;*/
		}
	}

	.formUploadMedia {
		display: flex;
		flex-direction: column;
		position: relative;

		.boxCharge {
			.widthAvailable();
			min-height: 200px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2px dotted var(--color-line);
			border-radius: 6px;
			position: relative;

			&:hover {
				border-color: rgb(5, 186, 93);
			}

			.charge {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16px;
				z-index: 1;
				touch-action: none;
				pointer-events: none;

				.icon {
					font-size: 2.3em;
					color: var(--color-upload-text);
				}

				.message {
					font-size: 11px;
					color: var(--color-upload-text);
				}
			}

			.boxInputFile {
				position: absolute;
				z-index: 0;
				.widthAvailable();
				.heightAvailable();
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;

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

		}
	}

	.formControlDisplay {
		padding-top: 16px;
		margin-bottom: 8px !important;
		z-index: 10;

		label {
			position: absolute;
			font-size: 16px;
			margin: 8px 16px;
			transition: all ease 0.2s;
			z-index: 10;
			color: var(--color-placeholder-input);

			&.on {
				transition: all ease 0.2s;
				margin: -16px 8px;
				font-size: 14px;
			}
		}
	}

	select[class="formInput"] {
		//height: 34px;
	}

	.formInputCalendar {
		.icon {
			color: var(--color-icon-add);
		}

		label {
			margin-left: 0 !important;
		}

		.icon-calendar {
			position: absolute;
			z-index: 2;
			font-size: 18px;
			left: 8px;
			bottom: 5px;
		}
	}

	.formControlTree {}

	.formControlGroup {
		background: var(--color-white);
		padding: 16px;
		border-radius: 5px;
		border: 1px solid var(--color-line);
		display: flex !important;

		>.btn {
			margin-bottom: 8px;
			border: 1px dotted;

			&:hover {
				border-color: var(--color-green) !important;
			}
		}

		.checkbox {
			// float: left;
			background: var(--color-box-check);
			border: 1px solid var(--color-box-border);
			padding: 4px 8px 4px 4px;
			box-shadow: 1px 1px 5px var(--color-box-shadow);
			border-radius: 4px;
			margin-bottom: 8px !important;
			margin-right: 8px;
			margin-left: 0 !important;

			.box {
				margin-left: 4px;
			}
		}
	}

	.formSlit {
		display: flex;
		align-items: center;
		position: relative;
		flex-direction: row;
		gap: 0;
		width: auto;
		margin: 0;

		.btn {

			&.btnDropdown {
				//min-height: 34px;
				padding-left: 8px;
				padding-right: 8px;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				background: #5485f6;

				.icon {
					font-size: 12px;
				}

				&.on {
					background: #0f46c7;
				}

				&:hover {
					background: #0f46c7;
				}

			}

			&:first-child {
				border-bottom-right-radius: 0px;
				border-top-right-radius: 0px;
			}

			&:last-child {
				border-bottom-left-radius: 0px;
				border-top-left-radius: 0px;
			}
		}

		.dropdown {
			.widthAvailable();
			height: 0;
			overflow: hidden;
			position: absolute;
			display: flex;
			flex-direction: column;
			top: 34px;
			right: 0;

			&.on {
				min-height: 34px;
				padding-top: 4px;
				padding-bottom: 4px;
				.heightAvailable();
				position: absolute;
				box-shadow: 1px 1px 8px rgba(0, 0, 0, 30%);
				background: white;
				border-radius: 5px;

				a,
				button {
					.widthAvailable();
				}
			}
		}
	}

	.formTree {
		padding: 16px;
		padding-top: 45px;
		background: var(--color-white);
		border-radius: 5px;
		max-height: 450px;
		//border: 1px solid var(--color-line);
		position: relative;
		//@borderTree : 1px solid var(--color-line-tree);
		display: flex;
		flex-direction: column;
		overflow: hidden;

		label {
			position: absolute;
			top: 0;
			left: 0;
			padding: 16px;
			.widthAvailable();
			background: var(--color-white);
			z-index: 10;
		}

		.formGroup {
			margin-top: 8px;
			overflow-y: auto;
			gap: 0;
		}



		/* &::before {
			content: "";
			height: 99%;
			width: 1px;
			position: absolute;
			bottom: 14px;
			left: 26px;
			border-left: var(--line-tree-style);
		} */

		.level {
			padding: 0 16px;
			position: relative;
			//overflow-y: hidden;
			border-left: var(--line-tree-style);

			&:last-child {
				border-left: 0px;

				&::before {
					content: "";
					height: 11px;
					width: 1px;
					position: absolute;
					top: 0;
					left: 0;
					border-left: var(--line-tree-style);
				}
			}

			.head {
				padding: 4px 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 8px;
				position: relative;
				overflow-y: clip;

				.box {
					flex: 0 0 auto;

					&::before {
						content: "";
						height: 1px;
						width: 13px;
						position: absolute;
						margin-top: 8px;
						margin-left: -16px;
						border-top: var(--line-tree-style);
					}

					&.haveChild {
						&::after {
							content: "";
							height: 100%;
							width: 1px;
							position: absolute;
							top: 21px;
							left: 8px;
							border-left: var(--line-tree-style);
						}
					}

					input {
						width: 16px;
						height: 16px;
					}
				}

				.name {
					font-size: 13px;
					cursor: pointer;
					padding: 0 0 0 8px;
					flex: 1 1 auto;
					min-width: 0;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					&[state="0"] {
						opacity: 0.5;
					}

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

				.add {
					display: flex;
					align-items: center;
					margin-left: auto;

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

					.btnPermitToggle {
						font-size: 15px;
						opacity: 0.35;
						padding: 4px 4px;

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

						&.is-active {
							opacity: 1;
							color: var(--color-primary);
						}
					}

					.btnActionNode {
						font-size: 15px;
						margin: 0 8px;

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

					.btnStateNode {

						&[state="0"] {
							.icon-eye-open {
								display: none;
							}
						}

						&[state="1"] {
							.icon-eye-close {
								display: none;
							}
						}
					}

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

			.childs {
				position: relative;
				display: flex;
				flex-direction: column;
				overflow-y: hidden;
				margin-left: 8px;

				&.haveChild {
					/* &::before {
						content: "";
						height: 100%;
						width: 1px;
						position: absolute;
						bottom: 15px;
						left: 6px;
						border-left: var(--line-tree-style);
					} */
				}
			}
		}

		/* .children {
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: -100px;
				left: -1px;
				width: 1px;
				height: 150%;
				border-left: var(--border-tree);
			}
		}

		.level {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: start;
			position: relative;

			&[child="childrenActive"] {
				&::after {
					content: "";
					position: absolute;
					top: 25px;
					left: 17px;
					width: 1px;
					height: 9px;
					border-left: var(--border-tree);
				}
			}

			&.level-last {
				.box {
					&::after {
						content: "";
						position: absolute;
						top: -8px;
						left: -7px;
						width: 1px;
						height: 24px;
						border-left: var(--border-tree);
					}
				}
			}

			.box {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;

				&::before {
					content: "";
					position: absolute;
					top: 15px;
					left: -6px;
					width: 14px;
					height: 1px;
					border-top: var(--border-tree);
				}

				&::after {
					content: "";
					position: absolute;
					top: 0px;
					left: -7px;
					width: 1px;
					height: 34px;
					border-left: var(--border-tree);
				}

				&.haveChild {
					&::after {
						content: "";
						position: absolute;
						top: 24px;
						left: 16px;
						width: 1px;
						height: 8px;
						border-left: var(--border-tree);
					}
				}
			}

			.name {
				font-size: 14px;
				margin-left: 0;				width: 80%;
			}

			input[type="checkbox"] {
				width: 16px;
				height: 16px;
			}
		}

		>.formGroup {
			overflow-y: scroll;
			max-height: 420px;
			padding-left: 4px;			display: flex;
			flex-direction: column;

			&::before {
				content: "";
				position: absolute;
				width: 1px;
				height: 100%;
				top: 0px;
				left: 0px;
				border-left: var(--border-tree);
			}

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 10px;
				height: 16px;
				// background: white;
			}
		}

		.level-last {
			&::before {
				content: "";
				display: none;
			}

			.box {
				::after {
					background: red;
				}
			}

			.childActive {
				&::after {
					height: 24px !important;
				}
			}
		}

		.level0 {
			margin-left: 4px;
			.box {
				&::before {
					width: 10px;
					left: -2px;
				}

				&::after {
					left: -2px;
					top: 17px;
				}
			}
		} */
	}

	.formGroupAround {
		.widthAvailable();
		display: flex;
		justify-content: space-around;
	}

	.formChargeMedia {
		.widthAvailable();
		position: relative;
		border-radius: 5px;
		min-height: calc(var(--form-media-box-height) * 2);
		border-radius: 5px;
		border-radius: 5px;
		/* flex-grow         : 1; */
		/* flex-shrink       : 1; */
		/* flex-basis        : 0%; */
		box-sizing: border-box;
		grid-template-columns: repeat(4, 1fr);
		display: grid;
		flex-wrap: wrap;
		grid-gap: 1rem;
		-webkit-user-select: none;
		user-select: none;
		padding: 4px;
		margin-bottom: 8px;

		.item {
			width: 100%;
			height: 100%;
			min-height: var(--form-media-box-height);
			display: flex;
			overflow: hidden;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--color-line);
			border-radius: 5px;
			margin-right: 16px;
			margin-bottom: 16px;
			position: relative;
			cursor: move;
			background: rgba(96, 96, 96, 28%);

			&:first-child {
				grid-column: 1 / span 2;
				grid-row: 1 / span 2;

				.img {
					img {
						max-height: calc(var(--form-media-box-height) * 2 + 10px);
					}
				}
			}

			&.on {
				border: 1px solid var(--color-primary);

				.actions {
					.btnSelectMedia {
						color: var(--color-primary);
					}
				}
			}

			.actions {
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;

				.btnOrderMedia {
					position: absolute;
					left: 7px;
					top: 10px;
					font-size: 18px;
					color: rgba(255, 255, 255, 0.7);

					&:hover {
						color: white;
					}
				}

				.btnSelectMedia,
				.btnSelectImage {
					position: absolute;
					right: 7px;
					top: 8px;
					font-size: 17px;
					color: white;
				}

				.btnEditMedia,
				.btnEditImage {
					position: absolute;
					right: 7px;
					bottom: 10px;
					font-size: 19px;
					color: rgba(255, 255, 255, 0.7);

					&:hover {
						color: white;
					}
				}

				&:hover {
					background-color: rgba(0, 0, 0, 0.7);
				}
			}

			.img {
				position: relative;
				z-index: 0;

				img {
					max-height: var(--form-media-box-height);
				}
			}
		}

		.boxInputs {
			display: none;
		}

		.boxInputFile {
			background-color: var(--color-white);

			&.block {
				width: 99%;
				height: 99%;
				min-height: var(--form-media-box-height);
				position: relative;
				display: flex;

				.boxInner {
					position: relative;
				}

				.inputFileBtn {}
			}

			.inputFileBtn {
				border: 2px dotted var(--color-line);
				border-radius: 5px;
				color: transparent;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 99%;
				height: 99%;
				min-height: var(--form-media-box-height);
				display: block;

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

				&:hover {
					border-color: var(--alert-success);
				}
			}

			.boxInner {
				width: 99%;
				height: 99%;
				min-height: var(--form-media-box-height);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				touch-action: none;
				pointer-events: none;
				overflow: hidden;
				position: absolute;
				top: 2px;
				left: 2px;
				z-index: 1;
				background: var(--color-white);

				&.block {
					position: relative;
					top: auto;
					left: auto;
					margin-right: 8px;
					margin-bottom: 8px;

					.item {
						width: 99%;
						height: 99%;
						display: flex;
						overflow: hidden;
						align-items: center;
						justify-content: center;
						border: 1px solid var(--color-line);
						border-radius: 5px;
					}
				}

				.icon {
					font-size: 2em;
					margin-bottom: 8px;
				}

				.message {
					margin-top: 8px;
					opacity: 0.8;
					padding: 0 8px;
					text-align: center;
					font-size: 80%;

					&.on {
						margin-top: 0;
						font-size: 16px;
						font-weight: bold;
					}
				}
			}
		}

		.boxMediaMini {
			min-height: 130px;
			background: white;
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 4px;
			margin-left: 4px;
			padding: 0 8px;
			text-align: center;
			pointer-events: none;

			span {
				padding: 0;
			}

			a {
				color: var(--color-btn-primary);
			}
		}
	}

	.rolesCatFrame {
		padding: 16px;
		padding-top: 45px;
		background: var(--color-white);
		border-radius: 5px;
		max-height: 450px;
		min-height: 200px;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		label {
			position: absolute;
			top: 0;
			left: 0;
			padding: 16px;
			.widthAvailable();
			background: var(--color-white);
			z-index: 10;
		}

		.formGroup {
			margin-top: 8px;
			overflow-y: auto;
			flex: 1;
		}
	}

	.rolesCatRoot {
		display: flex;
		flex-direction: column;
		gap: 8px;

		.level {
			display: flex;
			flex-direction: column;
			gap: 0;

			.head {
				padding: 0 16px 0 16px !important;
				gap: 8px !important;
				justify-content: flex-start !important;
			}
		}
	}

	.rolesCatTree {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.rolesCatItem {
		padding-left: calc(var(--level) * 24px);
	}

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

		input[type="checkbox"] {
			width: 18px;
			height: 18px;
			margin: 0;
			flex-shrink: 0;
			cursor: pointer;
		}
	}

	.rolesCatLabel {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rolesAccessFrame {
		padding: 16px;
		padding-top: 45px;
		background: var(--color-white);
		border-radius: 5px;
		max-height: 450px;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		label {
			position: absolute;
			top: 0;
			left: 0;
			padding: 16px;
			.widthAvailable();
			background: var(--color-white);
			z-index: 10;
		}

		.formGroup {
			margin-top: 8px;
			overflow-y: auto;
		}
	}

	.rolesAccessRoot {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.rolesAccessSys {
		border: 1px solid var(--color-line);
		border-radius: 6px;
		padding: 16px 16px 8px;
	}

	.rolesAccessSysRow {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 18px;
		font-weight: 500;
	}

	.rolesAccessMods {
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px dotted var(--color-line);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.rolesAccessMod {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

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

	.rolesAccessLabel {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rolesAccessActions {
		display: flex;
		align-items: center;
		gap: 16px;
		flex: 0 0 auto;
	}

	.rolesPermits {
		display: flex;
		align-items: center;
		gap: 16px;
		position: relative;
		padding-left: 16px;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 20px;
			background: var(--color-line);
		}
	}

	.btnPermitToggle {
		font-size: 18px;
		opacity: 0.35;
		padding: 4px 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;

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

		&.is-active {
			opacity: 1;
			color: var(--color-primary);
		}
	}

	.formChargeImage {
		.widthAvailable();
		position: relative;
		border-radius: 5px;
		min-height: calc(var(--form-media-box-height) * 2);
		border-radius: 5px;
		border-radius: 5px;
		/* flex-grow         : 1; */
		/* flex-shrink       : 1; */
		/* flex-basis        : 0%; */
		box-sizing: border-box;
		grid-template-columns: repeat(4, 1fr);
		display: grid;
		flex-wrap: wrap;
		grid-gap: 1rem;
		-webkit-user-select: none;
		user-select: none;
		padding: 4px;

		.box {
			display: flex;
			margin-top: -8px;
		}

		.item {
			width: 100%;
			height: 100%;
			min-height: var(--form-media-box-height);
			display: flex;
			overflow: hidden;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--color-line);
			border-radius: 5px;
			margin-right: 16px;
			margin-bottom: 16px;
			position: relative;
			cursor: move;

			&:first-child {
				grid-column: 1 / span 2;
				grid-row: 1 / span 2;

				.img {
					img {
						max-height: calc(var(--form-media-box-height) * 2 + 10px);
					}
				}
			}

			&.on {
				border: 1px solid var(--color-primary);

				.actions {
					.btnSelectMedia {
						color: var(--color-primary);
					}
				}
			}

			.actions {
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;



				.btnTrashImg,
				.btnTrashImage {
					position: absolute;
					right: 8px;
					top: 8px;
					font-size: 17px;
					color: white;
				}

				.btnEditImage {
					position: absolute;
					right: 7px;
					bottom: 10px;
					font-size: 19px;
					color: rgba(255, 255, 255, 0.7);

					&:hover {
						color: white;
					}
				}

				&:hover {
					background-color: rgba(0, 0, 0, 0.7);
				}
			}

			.img {
				position: relative;
				z-index: 0;

				img {
					max-height: var(--form-media-box-height);
				}
			}
		}

		.boxInputs {
			display: none;
		}

		.boxInputFile {
			background-color: var(--color-white);

			&.block {
				width: 99%;
				height: 99%;
				min-height: var(--form-media-box-height);
				position: relative;
				display: flex;

				.boxInner {
					position: relative;
				}

				.inputFileBtn {}
			}

			.inputFileBtn {
				border: 2px dotted var(--color-line);
				border-radius: 5px;
				color: transparent;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 99%;
				height: 99%;
				min-height: var(--form-media-box-height);
				display: block;

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

				&:hover {
					border-color: var(--alert-success);
				}
			}

			.boxInner {
				width: 99%;
				height: 99%;
				min-height: var(--form-media-box-height);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				touch-action: none;
				pointer-events: none;
				overflow: hidden;
				position: absolute;
				top: 2px;
				left: 2px;
				z-index: 1;
				background: var(--color-white);

				&.block {
					position: relative;
					top: auto;
					left: auto;
					margin-right: 8px;
					margin-bottom: 8px;

					.item {
						width: 99%;
						height: 99%;
						display: flex;
						overflow: hidden;
						align-items: center;
						justify-content: center;
						border: 1px solid var(--color-line);
						border-radius: 5px;
					}
				}

				.icon {
					font-size: 2em;
					margin-bottom: 8px;
				}

				.message {
					margin-top: 8px;
					opacity: 0.8;
					padding: 0 8px;
					text-align: center;

					&.on {
						margin-top: 0;
						font-size: 16px;
						font-weight: bold;
					}
				}
			}
		}

		.boxMediaMini {
			min-height: 130px;
			background: white;
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 4px;
			margin-left: 4px;
			padding: 0 8px;
			text-align: center;
			pointer-events: none;

			span {
				padding: 0;
			}

			a {
				color: var(--color-btn-primary);
			}
		}
	}

	.formChargeDocs {
		width: 300px;
		height: auto !important;
		padding: 30px 8px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-left: 4px;
		margin-top: 24px;

		.btnRemoveDoc {
			position: absolute;
			z-index: 2;
			background: var(--color-white);
			font-size: 22px;
			border-radius: 20px;
			padding: 0;
			margin: 0;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			top: -10px;
			right: -12px;

			.icon {
				margin: 0 !important;
				padding: 0 !important;
				color: var(--color-tab-bg-hover);
			}

			&:hover {
				.icon {
					color: var(--color-violet) !important;
				}
			}
		}

		.boxIcon {
			touch-action: none;
			pointer-events: none;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			position: absolute;
			border-radius: 7px;
			flex-direction: column;
			overflow: hidden;
			border: 2px dotted var(--color-line);
			background-color: var(--color-white);

			.icon {
				font-size: 21px;
				margin-bottom: 4px;
				color: var(--color-line);
			}
		}
	}

	.formCircleControl {
		width: 120px;
		height: 120px;
		border-radius: 150px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 0 16px;

		.btnRemoveImg {
			position: absolute;
			z-index: 2;
			background: var(--color-white);
			font-size: 22px;
			border-radius: 20px;
			padding: 0;
			margin: 0;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0px;
			right: 7px;

			.icon {
				margin: 0 !important;
				padding: 0 !important;
				color: var(--color-tab-bg-hover);
			}

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

		.boxIcon {
			touch-action: none;
			pointer-events: none;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			position: absolute;
			border-radius: 150px;
			flex-direction: column;
			line-height: 15px;
			overflow: hidden;
			border: 1px solid var(--color-line);
			background-color: var(--color-white);

			img {
				height: 150px;
			}

			.icon {
				font-size: 24px;
				margin-top: 8px;
				color: var(--color-icon-add);
			}

			span {
				font-size: 12px;
				width: 100px;
				text-align: center;
			}
		}

		input[type="file"] {
			z-index: 0;
			width: 120px;
			height: 120px;
			opacity: 0;
		}
	}

	.formDialCelular {
		display: flex !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
		align-items: center;
		min-height: 24px !important;

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

			img {
				height: 18px;
				margin-right: 4px;
			}
		}

		input {
			margin-left: 4px;
			width: 90%;
			height: 90%;
			border: 0;
			/* border-left: 1px solid #ccc; */
			background: transparent;
			font-size: 14px;
		}
	}

	.formDialSimple {
		.dial {
			position: absolute;
			z-index: 1;
			height: 40px;
			display: flex;
			align-items: center;
			left: 10px;
			top: 1px;

			.img {
				width: 32px;
				height: 32px;
				display: block;
				margin-right: 4px;
				display: block;
				background-size: cover !important;
			}

			label {
				font-size: 14px;
				font-weight: bold;
			}
		}

		input {
			padding-left: 85px !important;
		}
	}

	.formSelectCountry {
		position: relative;
		padding: 0 !important;
		height: 32px;

		.countrySelect {
			.widthAvailable();
			position: relative;
			display: flex;
			justify-content: space-between;

			.country {
				width: 90%;

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

					img {
						margin-right: 4px;
						width: 26px;
						height: 18px;
					}

					span {
						text-overflow: ellipsis;
						overflow: hidden;
						height: 15px;
						margin-top: -4px;
					}
				}
			}

			.btnSelectCountry {
				position: absolute;
				width: 35px;
				height: 32px;
				display: flex;
				top: 0px;
				right: 0px;
				align-items: center;
				justify-content: center;
				background: #949eb7;
				border-radius: 0px 4px 4px 0px;
				color: white;
			}
		}
	}

	.formAlignCenter {
		align-items: center;
	}

	.formControlSearch {
		position: relative;

		.iconSearch {
			position: absolute;
			left: 8px;
			top: 8px;
			z-index: 2;
			font-size: 16px;
		}

		.formInput {
			padding-left: 30px !important;
		}

		.iconClear {
			position: absolute;
			right: 8px;
			top: 8px;
			z-index: 2;
			font-size: 17px;
			color: var(--color-icon-add-off);
			display: none;

			&.on {
				display: inline-block;
			}

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

		.boxResults {
			position: absolute;
			width: 98.6%;
			height: 0px;
			top: 32px;
			z-index: 3;
			overflow-y: auto;
			border: 1px solid transparent;
			background: white;
			border-radius: var(--border-radius-form);
			transition: all ease 0.3s;
			opacity: 0;

			&.active {
				border: 1px solid var(--color-line);
				transition: all ease 0.3s;
				height: auto;
				max-height: 200px;
				opacity: 1;
			}

			.item {
				padding: 8px;
				display: flex;



				&:active,
				&:visited,
				&:link {
					color: var(--color-text);
				}

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

				&:nth-child(even) {
					background: var(--color-bg-gray);
				}
			}
		}
	}

	.formLinearRows {
		.formInput {
			padding: 0;
			border: 0px;
			background: #0000;
		}
	}

	.formHeadTable {
		padding-left: 16px;
		padding-right: 16px;
		display: flex;
		gap: 16px;

		.formControl {
			padding-left: 8px;
			padding-right: 8px;

			label {
				font-size: 12px;
				margin-top: 0;
				margin-bottom: 0;
			}
		}

	}

	.formInputCI {
		position: relative;
		margin-bottom: 8px !important;

		select {
			position: absolute;
			font-size: 15px;
			padding: 4px 8px;
			bottom: 1px;
			right: 2px;
			height: 32px;
			background: var(--color-icon-add);
			border: 1px solid var(--color-icon-add);
			color: var(--color-white);
			border-bottom-right-radius: 3px;
			border-top-right-radius: 3px;
		}

		.formInput {
			height: 16px;
			padding-right: 80px !important;
		}

		&::after {
			right: -7px;
			background: var(--color-icon-add);
			color: var(--color-white);
		}
	}

	.form5w {
		width: 4% !important;
	}

	.form8w {
		width: 7% !important;
	}

	.form10w {
		width: 10% !important;
	}

	.form15w {
		width: 15% !important;
	}

	.form20w {
		width: 20% !important;
	}

	.form25w {
		width: 25% !important;
	}

	.form30w {
		width: 35% !important;
	}

	.form35w {
		width: 30% !important;
	}

	.form33w {
		width: 33% !important;
	}

	.form40w {
		width: 40% !important;
	}

	.form45w {
		width: 45% !important;
	}

	.form50w {
		width: 49.5% !important;
	}

	.form55w {
		width: 45% !important;
	}

	.form60w {
		width: 60% !important;
	}

	.form65w {
		width: 65% !important;
	}

	.form70w {
		width: 70% !important;
	}

	.form75w {
		width: 75% !important;
	}

	.form80w {
		width: 80% !important;
	}

	.form85w {
		width: 85% !important;
	}

	.form90w {
		width: 90% !important;
	}

	.form95w {
		width: 95% !important;
	}

	.form100w {
		width: 100% !important;
	}

	.formActions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: row;
		padding: 16px 0 0;
		z-index: 0;
		gap: 8px;

		.btn {
			//margin-left: 15px;
			min-height: 20px;

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

		&.normal {
			margin-bottom: 16px !important;
		}

		&.min {
			margin-bottom: 8px !important;
		}

		&.fit {
			margin-bottom: 0 !important;
		}
	}

	.formIconAddon {
		position: relative;

		&.iconRight {
			>.icon {
				left: auto;
				right: 8px;
			}

			input {
				padding-left: 8px !important;
				padding-right: 40px !important;
			}
		}

		>.icon {
			z-index: 2;
			position: absolute;
			top: 10px;
			left: 10px;
			font-size: 20px;
			color: var(--color-icon-add);
		}

		input {
			padding-left: 40px !important;
		}

		&.formIconAddonLg {
			>.icon {
				top: 12px;
				left: 12px;
				font-size: 20px;
			}
		}
	}

	.formDivider {
		display: flex;
		margin-bottom: 16px;

		.line {
			width: 45%;
			height: 1px;
			border-bottom: 1px dotted var(--color-line);
			padding-top: 8px;
		}

		.text {
			font-size: 14px;
			width: 10%;
			text-align: center;
			color: var(--color-text);
		}
	}

	.btnCerrarInputGroup {
		padding: 4px;
		margin-top: 0;
		display: block;
		background: var(--alert-danger);
		width: 29px;
		height: 29px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		color: var(--color-white);
		opacity: 1;

		&:hover {
			opacity: 0.8;
		}
	}

	.formBirthday {
		margin-top: 16px;

		>label {
			font-weight: bold;
		}

		.group {
			display: flex;
			flex-direction: row;
			// max-width: 210px;

			.formControl {
				label {
					margin: 0;
					font-size: 13px;
					margin-top: 8px;
					padding-left: 4px;
					line-height: 10px;
				}
			}
		}

		.formInput {
			text-align: right;
			margin-top: 4px;
			margin-right: 8px;
			padding: 4px 8px !important;
			font-size: 15px;

			&[id="inputDay"] {}

			&[id="inputMonth"] {}

			&[id="inputYear"] {
				margin-right: 0;
			}
		}
	}

	.formBottomBtns {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: row;
			padding: 8px 0 16px 0;
			z-index: 0;
			gap: 8px;
			margin-bottom: 0 !important;
	}
}

.actionsBottomWindow {
	.widthAvailable();
	background: var(--color-white);
	border-top: 1px solid var(--color-line);
	position: absolute;
	bottom: 0px;
	display: flex;
	justify-content: space-between;

	.actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: row;
		padding: 16px;
	}
}

.btnBlockPw {
	right: 15px;
	top: 13px;
	opacity: 0.5;
	position: absolute;
	z-index: 2;
	font-size: 20px;
}

.trumbowyg-box {
	border-radius: var(--border-radius-form-input);
	border: 1px solid var(--color-line);
	min-height: 120px;

	.trumbowyg-button-pane {
		border-top-left-radius: var(--border-radius-form-input);
		border-top-right-radius: var(--border-radius-form-input);
		background: #f4f4fb;
	}

	.trumbowyg-editor {
		ul {
			li {
				list-style: initial;
				margin-left: 24px;
			}
		}
	}

}

.trumbowyg-editor,
.trumbowyg-textarea {
	min-height: 120px;
	line-height: 24px;
}

input {
	&.error {
		border-color: var(--alert-danger);
		box-shadow: 0px 0px 0px 1px var(--alert-danger) !important;
		transform: all ease 0.2s;
	}
}

.selectHoursStartEnd {
	display: flex;
	align-items: center;
}

.listHours {
	position: relative;
	line-height: 14px;

	.btnListHours {
		padding: 8px 8px 4px 8px;
		font-size: 16px;
		cursor: text;
		border-radius: 5px;

		&.on {
			background: #e4e7f3;
		}
	}

	.bar {
		margin-top: -4px;
	}

	.list {
		width: 80px;
		display: none;
		flex-direction: column;
		overflow-y: auto;
		position: absolute;
		z-index: 1;
		top: 26px;
		left: 0px;
		.boxShadowList();

		&.on {
			display: flex;
		}

		.btnHour {
			padding: 8px 16px;
			font-size: 15px;
			.widthAvailable();

			&.active {
				background-color: #e4e7f3;
			}

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


.formModal {
	position: fixed;
	z-index: 100;
	top: 100px;
	right: 20px;
	width: 430px;
	height: 80%;
	//overflow-y: auto;
	box-sizing: content-box;
	background-color: var(--color-white);
	//border: 1px solid var(--color-line);
	border-radius: 5px;
	border-top: 5px solid rgb(148 158 183);
	.boxShadow();

	.btnCloseModal {
		font-size: 14px;
		padding: 0;
		color: var(--color-btn-close-modal);

		&:hover {
			background-color: transparent;
			color: var(--color-btn-hover-close-modal);
		}
	}

	.title {
		font-size: 18px;
		padding: 8px 16px 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icon {
			margin-left: -4px;
			margin-right: 4px;
			opacity: .3;
		}
	}

	.form {
		.widthAvailable();
		padding: 0 16px;
		height: calc(100% - 60px);
		overflow-y: auto;
		padding-right: 8px;

		.formControl {
			&:last-child {
				margin-bottom: 8px;
			}
		}
	}

	.btnsActions {
		position: absolute;
		width: -webkit-fill-available;
		width: -moz-available;
		width: fill-available;
		display: flex;
		justify-content: flex-end;
		left: 0;
		bottom: 0;
		background: white;
		padding: 8px;
		box-shadow: 1px 1px 15px #d9d9d9;
		border-top: 1px solid var(--color-line);
		z-index: 100;
	}
}

.required {
	color: var(--color-danger);
	margin-right: 4px;
}

// Dial Code Selector Styles
.formDialCode {
	position: relative;
	z-index: 1;

	&[state="1"] {
		z-index: 1000;
	}

	.btnDialCode {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 8px;
		cursor: pointer;
		border: 1px solid var(--color-line);
		border-radius: 4px;
		background-color: var(--color-white);
		transition: all 0.2s ease;

		&:hover {
			border-color: var(--color-primary);
			background-color: #f8f9fa;
		}

		img {
			width: 24px;
			height: 18px;
			object-fit: cover;
			border-radius: 2px;
		}

		span {
			flex: 1;
			font-size: 0.9em;
			color: #333;
		}

		i {
			font-size: 12px;
			color: #666;
			transition: transform 0.2s ease;
		}
	}

	.listDialCode {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 4px;
		background: var(--color-white);
		border: 1px solid var(--color-line);
		border-radius: 4px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		z-index: 9999;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		width: 100%;
		min-width: 280px;

		&.on {
			max-height: 350px;
			opacity: 1;
			visibility: visible;
			overflow: hidden;
		}

		.inner {
			display: flex;
			flex-direction: column;
			max-height: 350px;
		}

		.search {
			padding: 8px;
			border-bottom: 1px solid #e9ecef;

			input {
				.widthAvailable();
				padding: 8px 8px;
				border: 1px solid var(--color-line);
				border-radius: 4px;
				font-size: 13px;
				outline: none;
				transition: border-color 0.2s ease;

				&:focus {
					border-color: var(--color-primary);
				}
			}
		}

		.list {
			overflow-y: auto;
			max-height: 280px;
			padding: 4px 0;
		}
	}

	.dialCodeItem {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 16px;
		cursor: pointer;
		transition: background-color 0.2s ease;
		border-bottom: 1px solid #f1f3f5;

		&:last-child {
			border-bottom: none;
		}

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

		img {
			width: 24px;
			height: 18px;
			object-fit: cover;
			border-radius: 2px;
			flex-shrink: 0;
		}

		.countryName {
			flex: 1;
			font-size: 13px;
			color: #333;
		}

		.dialCode {
			font-size: 13px;
			color: #666;
			font-weight: 500;
		}
	}
}

// Estilos para el modal global de dial code
#globalDialCodeModal {
	position: fixed;
	background: var(--color-white);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 10000;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	min-width: 280px;

	&.on {
		max-height: 350px;
		opacity: 1;
		visibility: visible;
		overflow: hidden;
	}

	.inner {
		display: flex;
		flex-direction: column;
		max-height: 350px;
	}

	.search {
		padding: 8px;
		border-bottom: 1px solid #e9ecef;

		input {
			.widthAvailable();
			padding: 8px 8px;
			border: 1px solid var(--color-line);
			border-radius: 4px;
			font-size: 13px;
			outline: none;
			transition: border-color 0.2s ease;

			&:focus {
				border-color: var(--color-primary);
			}
		}
	}

	.list {
		overflow-y: auto;
		max-height: 280px;
		padding: 4px 0;
	}

	.dialCodeItem {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 16px;
		cursor: pointer;
		transition: background-color 0.2s ease;
		border-bottom: 1px solid #f1f3f5;

		&:last-child {
			border-bottom: none;
		}

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

		img {
			width: 24px;
			height: 18px;
			object-fit: cover;
			border-radius: 2px;
			flex-shrink: 0;
		}

		.countryName {
			flex: 1;
			font-size: 13px;
			color: #333;
		}

		.dialCode {
			font-size: 13px;
			color: #666;
			font-weight: 500;
		}
	}
}

// ============================================
// Score Slider Component (0-100)
// ============================================
.scoreSliderContainer {
	position: relative;
	padding: 0 8px 0;
	user-select: none;
	display: flex;
	flex-direction: column;
	gap: 16px;

	.scoreSliderLabel {
		display: block;
		font-size: 13px;
		font-weight: 500;
		color: #495057;
		margin-bottom: 8px;
	}

	.scoreSliderSection {
		width: 100%;
	}

	.scoreSliderTrack {
		position: relative;
		height: 6px;
		background: #e9ecef;
		border-radius: 10px;
		cursor: pointer;
		margin: 8px 0 40px 0;

		.scoreSliderFill {
			position: absolute;
			height: 100%;
			background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-success) 100%);
			border-radius: 10px;
			transition: width 0.2s ease;
			pointer-events: none;
		}

		.scoreSliderThumb {
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 16px;
			height: 16px;
			background: var(--color-white);
			border: 1px solid var(--color-line);
			border-radius: 50%;
			cursor: grab;
			transition: left 0.2s ease;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				cursor: grabbing;
				transform: translate(-50%, -50%) scale(1.2);
			}

			.scoreSliderValue {
				position: absolute;
				top: 30px;
				left: 50%;
				transform: translateX(-50%);
				background: var(--color-primary);
				color: var(--color-white);
				padding: 4px 8px;
				border-radius: 4px;
				font-size: 11px;
				font-weight: 600;
				white-space: nowrap;

				&::after {
					content: "";
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -5px;
					height: 0;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-bottom: 5px solid var(--color-primary);
				}
			}
		}
	}

	.scoreQuickSection {
		width: 100%;

		.scoreQuickButtons {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 4px;

			.scoreQuickBtn {
				padding: 8px 8px;
				font-size: 13px;
				font-weight: 500;
				color: #495057;
				background: var(--color-white);
				border: 1px solid var(--color-line);
				border-radius: 4px;
				cursor: pointer;
				transition: all 0.2s ease;
				text-align: center;

				&:hover {
					background: #f8f9fa;
					border-color: var(--color-primary);
					color: var(--color-primary);
				}

				&.active {
					background: var(--color-primary);
					border-color: var(--color-primary);
					color: var(--color-white);
				}

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

.formDescription {
	font-size: 13px;
	color: #6c757d;
	margin: 4px 0 8px 0;
	line-height: 1.4;
}

// =============================================
// SORTABLE ITEMS - General Styles (Mixins)
// =============================================

// Mixin base para items ordenables
.sortableItem() {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	//overflow: hidden;
	transition: box-shadow 0.2s ease;

	&:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	// NOTA: Las reglas de colapso deben definirse en cada implementación
	// porque los nombres de clase pueden variar (.sliderItemBody, .productItemBody, etc.)
}

// Mixin para header de item ordenable
.sortableItemHeader() {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	background: var(--color-bg-gray-light);
	border-bottom: 1px solid var(--color-line);
	gap: 8px;

	// Botón drag handle (izquierda)
	.handle,
	.ui-sortable-handle {
		padding: 4px 8px;
		font-size: 14px;
		opacity: 0.5;
		cursor: move !important;
		flex-shrink: 0;

		&:hover {
			opacity: 1;
		}
	}
}

// Mixin para título de item ordenable
.sortableItemTitle() {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Mixin para acciones de item ordenable
.sortableItemActions() {
	display: flex;
	gap: 4px;
	flex-shrink: 0;

	.btn {
		padding: 4px 8px;
		font-size: 14px;
		opacity: 0.6;
		transition: opacity 0.2s ease;

		&:hover {
			opacity: 1;
		}
	}
}

// Mixin para body de item ordenable
.sortableItemBody() {
	padding: 16px;
	transition: all 0.2s ease;

	.formGroup {
		margin-bottom: 0;
	}

	.formActions {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--color-line);
		display: flex;
		justify-content: flex-end;
	}
}

// =============================================
// SORTABLE CONTAINER - General Styles (Mixin)
// =============================================

.sortableContainer() {
	display: flex;
	flex-direction: column;
	gap: 16px;

	&:empty {
		min-height: 100px;
		align-items: center;
		justify-content: center;
		border: 2px dashed var(--color-line);
		border-radius: 8px;
		background: var(--color-bg-gray-light);

		&::after {
			content: "No hay items. Haz clic en 'Agregar Item' para comenzar.";
			color: var(--color-text-light);
			font-size: 13px;
		}
	}
}

// =============================================
// DRAG AND DROP STATES - General (Mixin)
// =============================================

// Mixin para placeholder de sortable
.ui-sortable-placeholder() {
	visibility: visible !important;
	background: var(--color-bg-gray-light);
	border: 2px dashed var(--color-primary);
	border-radius: 8px;
	min-height: 60px;
}

// =============================================
// CHECKLIST - Estilos para checklists dinámicos
// =============================================

.formChecklist {
	.widthAvailable();

	.checklistTitle {
		display: block;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 8px;
		color: var(--color-text);
	}

	.checklistContainer {
		display: flex;
		flex-direction: column;
		gap: 8px;

		.checklistItem {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 4px 0;

			input[type="checkbox"] {
				width: 18px;
				height: 18px;
				cursor: pointer;
				margin: 0;
			}

			label {
				cursor: pointer;
				margin: 0;
				font-size: 14px;
				color: var(--color-text);
				user-select: none;

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

	.checklistEmpty {
		padding: 16px;
		text-align: center;
		color: var(--color-text-light);
		font-size: 13px;
		background: var(--color-bg-gray-light);
		border-radius: 6px;
	}

	// ── Attachment upload widget ──────────────────────────────────────────────
	.formAttachmentFrame {
		.formAttachmentDescription {
			color: var(--color-text-soft);
			font-size: 12px;
			line-height: 1.45;
			margin-top: -6px;
		}
	}

	.uploadBrandBox {
		.widthAvailable();
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.uploadBrandBox .uploadDropZone {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		border: 2px dashed #d9d9d9;
		border-radius: 14px;
		padding: 22px 24px;
		//min-height: 108px;
		background: var(--color-white);
		transition: border-color 0.15s ease, background-color 0.15s ease;
	}

	.uploadBrandBox .uploadDropZone:hover {
		border-color: var(--color-primary-soft, #b8c4d9);
		background: var(--color-bg-gray-light);
	}

	.uploadBrandBox .uploadDropZone.hidden {
		display: none;
	}

	.uploadBrandBox .uploadDropLeft {
		display: flex;
		align-items: center;
		gap: 16px;
		min-width: 0;
		color: var(--color-text-soft);
	}

	.uploadBrandBox .uploadDropLeft .icon {
		width: 40px;
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: var(--color-text-soft);
		flex-shrink: 0;
	}

	.uploadBrandBox .uploadDropText {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	.uploadBrandBox .uploadDropText span {
		font-size: 14px;
		line-height: 1.2;
		font-weight: 500;
		color: var(--color-text-soft);
	}

	.uploadBrandBox .uploadDropText small {
		font-size: 12px;
		line-height: 1.35;
		color: var(--color-text-light);
	}

	.uploadBrandBox .uploadBrowseBtn {
		flex-shrink: 0;
		cursor: pointer;
		border-color: #d1d5db;
		color: var(--color-text);
		background: var(--color-white);
	}

	.uploadBrandBox .uploadBrowseBtn:hover {
		border-color: var(--color-text-soft);
	}

	.uploadBrandBox .uploadBrowseBtn input {
		display: none;
	}

	.uploadBrandBox .uploadFilledCard {
		display: flex;
		align-items: center;
		gap: 12px;
		border: 1.5px solid #b8dfc0;
		border-radius: 12px;
		padding: 12px;
		background: #f4fbf6;
	}

	.uploadBrandBox .uploadFilledCard.hidden {
		display: none;
	}

	.uploadBrandBox .uploadFilledIcon {
		width: 72px;
		height: 72px;
		border-radius: 10px;
		background: rgba(255,255,255,0.82);
		border: 1px solid #cde6d3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		overflow: hidden;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
	}

	.uploadBrandBox .uploadFilledIcon img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.uploadBrandBox .uploadFilledIcon .brandPreviewInitial {
		font-size: 20px;
		font-weight: 700;
		color: var(--color-success, #1f8a4c);
	}

	.uploadBrandBox .uploadFilledInfo {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
		min-width: 0;
	}

	.uploadBrandBox .uploadFilledInfo strong {
		font-size: 14px;
		line-height: 1.15;
		font-weight: 600;
		color: var(--color-text);
	}

	.uploadBrandBox .uploadBrandPath {
		font-size: 12px;
		line-height: 1.35;
		color: #2b6cb0;
		word-break: break-word;
	}

	.uploadBrandBox .uploadFilledCheck {
		width: 52px;
		height: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		color: var(--color-success, #1f8a4c);
		flex-shrink: 0;
		font-size: 20px;
	}

	.uploadBrandBox .uploadRemoveBtn {
		align-self: flex-start;
		border-color: #d1d5db;
		color: var(--color-text);
		background: var(--color-white);
	}

	.uploadBrandBox .uploadRemoveBtn.hidden {
		display: none;
	}
}

// ── Attachment split layout (Logo / Favicon) ────────────────────────────────
.formAttachmentSplit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.formAttachmentSplit .formAttachmentFrame {
	padding: 12px;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	background: var(--color-white);
}

.formAttachmentSplit .formAttachmentFrame .formGroupFrame-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 2px;
}

.formAttachmentSplit .formAttachmentFrameLogo .uploadDropZone {
	background: #fbfdff;
}

.formAttachmentSplit .formAttachmentFrameLogo .uploadFilledCard {
	background: #eef8ff;
	border-color: #b8d8f0;
}

.formAttachmentSplit .formAttachmentFrameFavicon .uploadDropZone {
	background: #fcfdfb;
}

.formAttachmentSplit .formAttachmentFrameFavicon .uploadFilledCard {
	background: #f4fbf6;
	border-color: #b8dfc0;
}

// =============================================
// MOBILE - Media Queries
// =============================================

@media (max-width: 768px) {
	.sortableItem {
		.sortableItemBody {
			.formGroupTwoColumns {
				flex-direction: column;
			}
		}
	}

	.formAttachmentFrame {
		.formAttachmentDescription {
			font-size: 12px;
		}
	}

	.formAttachmentSplit {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.uploadBrandBox {
		gap: 8px;
	}

	.uploadBrandBox .uploadDropZone {
		padding: 16px;
		gap: 14px;
		align-items: flex-start;
		flex-direction: column;
	}

	.uploadBrandBox .uploadDropLeft {
		width: 100%;
		gap: 12px;
	}

	.uploadBrandBox .uploadDropText span {
		font-size: 14px;
	}

	.uploadBrandBox .uploadBrowseBtn {
		width: 100%;
		justify-content: center;
	}

	.uploadBrandBox .uploadFilledCard {
		padding: 10px;
		gap: 10px;
	}

	.uploadBrandBox .uploadFilledIcon {
		width: 64px;
		height: 48px;
	}

	.uploadBrandBox .uploadFilledInfo strong {
		font-size: 14px;
	}

	.uploadBrandBox .uploadBrandPath {
		font-size: 12px;
	}

	.uploadBrandBox .uploadFilledCheck {
		width: 44px;
		height: 34px;
		font-size: 16px;
		border-width: 2px;
	}
}