/* ==========================================================================
   ESTILOS DE CAMPOS BASE & COMPONENTES DE FORMULÁRIO
   ========================================================================== */

/* Agrupamento genérico para elementos de formulário */
:is(input[type="text"],
	input[type="tel"],
	input[type="number"],
	input[type="file"],
	input[type="password"],
	textarea,
	select,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button) {
	color: #5C5C5C;
	background-color: #FFF;
	border: 1px solid #DDD;
	outline: none;
	border-radius: var(--botao-radius);
	padding: 7px 10px;
	box-sizing: border-box;
}

/* Largura Total para Campos de Texto e Seletores */
:is(input[type="text"],
	input[type="tel"],
	input[type="number"],
	input[type="file"],
	input[type="password"],
	textarea,
	select) {
	width: 100%;

	/* Variações de Cores Temáticas */
	&.vermelho {
		color: #FFF;
		background-color: #D92127;
	}

	&.laranja {
		color: #FFF;
		background-color: #FF6600;
	}

	&.verde {
		color: #FFF;
		background-color: #009900;
	}

	&.amarelo {
		background-color: #FFCC29;
	}

	&.prata {
		color: #FFF;
		background-color: #AD8F49;
	}

	&.preto {
		color: #FFF;
		background-color: #5C5C5C;
	}

	&.azul {
		color: #FFF;
		background-color: #0079c0;
	}

	/* Placeholders e Foco */
	&::placeholder {
		color: #BBB;
	}

	&:focus {
		background-color: #F1FCFF;
		border-color: #0CF;
		color: #5C5C5C;
		box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.20);
	}

	&:disabled {
		background-color: #EEE;
		border-color: #DDD;
		color: #AAA;
	}
}

/* Botões */
:is(input[type="button"], input[type="submit"], input[type="reset"], button) {
	border: none;
	cursor: pointer;
}

button {
	display: flex;
	gap: 5px;
	align-items: center;
	white-space: nowrap;
}

button.center {
	justify-content: center;
}

/* Ajustes Específicos de Inputs */
select {
	padding: 6px 10px;

	& option:disabled {
		color: #DDD;
	}
}

input[type="file"] {
	padding: 3px;

	&::file-selector-button {
		color: #FFF;
		background-color: #0079C0;
		border: 0;
		border-right: 1px solid #E5E5E5;
		padding: 7px 10px;
		margin-right: 10px;
		transition: background-color 0.5s ease;

		&:hover {
			background-color: #118AD1;
		}

		&:active {
			background-color: #229BE2;
		}
	}
}

input[type="radio"] {
	width: 17px;
	height: 17px;
}

input[type="range"]:focus {
	outline: none;
	border-color: #4CAF50;
}

/* Classes de Alinhamento e Formatação Numérica */
input:is(.formatamoeda,
	.formatanumero,
	.formatapesokg,
	.formatasomentenumero,
	.formatakm,
	.formatadecimal3,
	.formatadecimal4,
	.formatadecimal5) {
	text-align: right;
}

/* ==========================================================================
   BOXFORM & ESTRUTURA DE LAYOUT
   ========================================================================== */

.boxform {
	& div {
		padding-block: 0;
	}

	/* Modificadores de tamanho de formulário */
	&.pequeno :is(input, textarea, select, button) {
		font-size: small;
		padding: 5px 7px;
	}

	&.grande :is(input, textarea, button) {
		font-size: 14px;
		padding: 10px 15px;
	}

	&.grande :is(select) {
		font-size: 14px;
		padding: 8px 15px;
	}

	&.extragrande :is(input, textarea, select, button) {
		font-size: x-large;
		padding: 10px 15px;
	}

	/* Layout dos Campos */
	& .campo {
		padding: 4px 0;
		display: grid;
		align-items: center;
		align-content: flex-start;

		& span {
			font-size: 0.8rem;
			margin-left: 5px;
		}

		&.center {
			justify-items: center;
		}

		&.pequeno {
			font-size: 0.78rem;

			& label {
				font-size: 0.65rem;
			}
		}

		&.fraco {
			color: #555;

			& label {
				color: #888;
			}
		}

		/* Grid para Rótulos em Coluna com Suporte Responsivo */
		&.coluna {
			display: grid;
			grid-template-columns: 120px 1fr;
			gap: 3px;

			@media (max-width: 700px) {
				grid-template-columns: 1fr;

				&> :is(select, input, textarea) {
					order: 2;
				}
			}
		}

		/* Campo com Borda Flutuante (estilo Material UI) */
		&.dados {
			position: relative;

			&>label {
				color: #666;
				position: absolute;
				top: -3px;
				left: 10px;
				background-color: #FFF;
				padding: 0 5px;
			}

			&>div {
				border: 1px solid #CCC;
				padding: 15px 12px 12px 12px;
				border-radius: 5px;

				&:hover {
					background: linear-gradient(0deg, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 80%);
				}
			}
		}
	}

	& label {
		font-size: 0.75rem;
		margin-bottom: 2px;
		width: fit-content;
		display: flex;
		align-items: center;

		&>.icofont-info-circle,
		&>.icofont-question-circle {
            font-size: 1.1rem;
            color: #60a5d9;
			margin-left: 5px;
			cursor: pointer;
		}

		&>span {
			font-size: 0.8rem;
			color: #000;
		}
	}

	/* Ações do Formulário (Botões) */
	& .botoes {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 10px 5px;
		padding: 10px 0;
		margin-top: 10px;
		border-top: 1px solid #CCC;

		&.no-margin {
			padding: 0;
			margin-top: 0;
			border-top: none;
		}

		&.center {
			justify-content: center;
		}

		&.total {
			display: grid;
			justify-content: inherit;

			& button {
				justify-content: center;
				width: 100%;
			}
		}
	}

	& .outros {
		display: grid;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	& .conteudo.overflow {
		padding-bottom: 100px;
	}

	& .exibir_icone {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 120px;
		border: dashed 1px #CCC;

		& i {
			font-size: 3.8rem;
			color: #333;
		}

		& svg {
			width: 100px;
			height: 100px;
			color: #333;
			fill: currentColor;
		}
	}
}

/* ==========================================================================
   COMPONENTES DE RECURSOS E UTILITÁRIOS DE FORMULÁRIO
   ========================================================================== */

/* Caixa de Mensagem */
.msgform {
	display: grid;
	align-items: center;
	justify-items: flex-start;
	padding: 10px 2px;
	font-size: 0.8rem;

	&:empty {
		display: none;
	}

	&>div {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
	}

	& .erro,
	& .erro * {
		color: #A00 !important;
	}

	& .sucesso,
	& .sucesso * {
		color: #0A0 !important;
	}

	& i {
		font-size: large;
	}
}

/* Spinner de Carregamento Refatorado */
.icofont-spinner {
	visibility: hidden;
	position: relative;

	&::after {
		visibility: visible;
		position: absolute;
		inset: 0;
		content: "\effa";
		animation: rotation 2s infinite linear;
	}
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

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

.formata_cartao_numero {
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: auto 50%;
}

/* Legendas */
.legenda {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: small;

	&::before {
		content: "";
		width: 16px;
		height: 16px;
		background-color: #CCC;
		border-radius: 20%;
	}

	&.verde::before {
		background-color: #009900;
	}

	&.laranja::before {
		background-color: #FF6600;
	}

	&.amarelo::before {
		background-color: #FFCC29;
	}

	&.vermelho::before {
		background-color: #D92127;
	}
}



ul.sortable-imagens {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-items: flex-start;
	gap: 10px;

	& li {
		margin: 0;
		padding: 0;
		width: 130px !important;
		height: 100px !important;
		border: 1px solid #CCC;
		position: relative;
		background-color: #FFF;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		&.cover {
			background-size: cover;
		}

		&>.imagem_configuracoes {
			position: absolute;
			display: grid;
			opacity: 0;
			inset: 0;
			background: rgba(255, 255, 255, 0.6);
			transition: opacity 0.5s;

			&>div {
				position: absolute;
				display: grid;
				grid-template-columns: auto auto;
				inset: 0;
				padding: 5px;
				align-content: space-between;
				justify-content: space-between;

				& button.pequeno {
					padding: 7px;
				}
			}
		}

		&:hover>.imagem_configuracoes {
			opacity: 1;
		}

		& img {
			cursor: pointer;
			border: none;
			position: absolute;
			padding: 4px;
			border-radius: 50%;
			width: 22px;
			height: 22px;
			box-sizing: border-box;

			&.delete {
				right: 3px;
				top: 3px;
				background-color: #C00;
			}

			&.lupa {
				left: 3px;
				top: 3px;
				background-color: #789;
			}

			&.rotate {
				left: 3px;
				bottom: 3px;
				background-color: #789;
			}
		}

		& input.paletaCorFoto {
			cursor: pointer;
			border: none;
			position: absolute;
			left: 2px;
			bottom: 2px;
		}
	}
}



/* Área de Upload (Drag & Drop) */
.drop-area {
	color: #AAA;

	&.highlight {
		background-color: lavender;
	}

	&.arquivos {
		border: 1px dashed #CCC;
		height: 250px;
	}

	&.imagem {
		position: relative;
		border: 1px dashed #CCC;
		height: 250px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px !important;

		& a {
			height: 100%;
			display: contents;
		}

		& img {
			max-height: 100%;
		}
	}

	&.imagens {
		border: none;
		height: 250px;
		overflow: auto;
		/*
		& :is(ul.ui-sortable, ul.sortable-imagens) {
			width: 100%;
			border: none;
			margin: 0;
			padding: 0;
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			justify-items: flex-start;
			gap: 10px;

			& li {
				margin: 0;
				padding: 0;
				width: 130px !important;
				height: 100px !important;
				border: 1px solid #CCC;
				position: relative;
				background-color: #FFF;
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;

				&.cover {
					background-size: cover;
				}

				&>.imagem_configuracoes {
					position: absolute;
					display: grid;
					opacity: 0;
					inset: 0;
					background: rgba(255, 255, 255, 0.6);
					transition: opacity 0.5s;

					&>div {
						position: absolute;
						display: grid;
						grid-template-columns: auto auto;
						inset: 0;
						padding: 5px;
						align-content: space-between;
						justify-content: space-between;

						& button.pequeno {
							padding: 7px;
						}
					}
				}

				&:hover>.imagem_configuracoes {
					opacity: 1;
				}

				& img {
					cursor: pointer;
					border: none;
					position: absolute;
					padding: 4px;
					border-radius: 50%;
					width: 22px;
					height: 22px;
					box-sizing: border-box;

					&.delete {
						right: 3px;
						top: 3px;
						background-color: #C00;
					}

					&.lupa {
						left: 3px;
						top: 3px;
						background-color: #789;
					}

					&.rotate {
						left: 3px;
						bottom: 3px;
						background-color: #789;
					}
				}

				& input.paletaCorFoto {
					cursor: pointer;
					border: none;
					position: absolute;
					left: 2px;
					bottom: 2px;
				}
			}
		}
		*/
	}

	&:empty {
		border: 1px dashed #CCC;
		min-height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #AAA;

		&::after {
			content: "Arraste o arquivo aqui";
			font-size: 0.9rem;
		}
	}
}

.drop-area-excel:empty::after {
	content: "Arraste sua planilha excel aqui";
	font-size: 0.9rem;
}

.drop-area-nota_fiscal:empty::after {
	content: "Arraste o XML da NF-e aqui";
	font-size: 0.9rem;
}

.drop-area-cte:empty::after {
	content: "Arraste o XML da CT-e aqui";
	font-size: 0.9rem;
}

/* Indicador de Quantidade / Contador de Texto */
.contador_txt_box {
	position: relative;

	&>span {
		background-color: #DDD;
		color: #666 !important;
		font-size: 0.625rem !important;
		position: absolute;
		right: 0;
		top: 0;
		padding: 2px 5px;
	}

	&.focus>span {
		background-color: #0CF;
		color: #FFF;
	}

	&.erro>span {
		background-color: #FC0;
		color: #333;
	}
}

/* Modificadores de Campo do tipo Multi-Select */
.selectmultiple {
	font-size: 0.875rem;
	color: #5C5C5C;
	background-color: #FFF;
	border: 1px solid #DDD;
	outline: none;
	padding: 7px 10px;
	text-align: left;

	& span {
		font-size: 0.875rem;
	}

	&:focus {
		background-color: #FFD;
		border-color: #DD618B;
		color: #5C5C5C;
	}

	&:disabled {
		background-color: #EEE;
		border-color: #DDD;
		color: #AAA;
	}

	&.pequeno {
		font-size: 0.625rem;
		padding: 3px 7px;
	}

	&.grande {
		font-size: 1.125rem;
		padding: 9px 15px;
	}
}

.multiselect-container {
	width: 100% !important;

	& label {
		font-size: 0.875rem;
	}

	&>li.active>a>label.checkbox {
		color: #333 !important;
		background: #EEE !important;
	}
}

/* Arvore de Categorias */
.listacategoria {
	padding-left: 0;

	& ul {
		padding-left: 15px;
	}

	& li {
		list-style: none;

		&>div {
			position: relative;
			padding: 3px 0;
		}
	}

	& ul li>div::after {
		content: '';
		width: 7px;
		height: 70%;
		position: absolute;
		top: -10%;
		left: -9px;
		border-left: 1px dashed #CCC;
		border-bottom: 1px dashed #CCC;
	}

	& label {
		display: flex;
		gap: 6px;
		justify-content: flex-start;
		align-items: center;
		width: fit-content;
		font-size: smaller;
		color: #999;
		margin: 0;
	}

	& span {
		vertical-align: 3px;
		font-size: small;
		color: #666;
		margin-right: 10px;
	}
}

/* Visualização de Senha */
.password-view {
	position: relative;
	padding: 0 !important;

	& i {
		position: absolute;
		top: 6px;
		right: 10px;
		z-index: 9;
		font-size: large;
		cursor: pointer;
		color: #AAA;
	}

	&.active i {
		color: #0AF;
	}
}

/* Mensagens Flutuantes em Campos */
.boxmsgflutuante {
	position: relative;
	padding: 0 !important;

	&>div {
		position: absolute;
		bottom: 0;
		z-index: 9999;
		padding: 3px 7px;
		display: none;

		&>div {
			display: flex;
			align-items: center;
			gap: 5px;

			& i {
				font-size: 0.8rem;
			}

			& span {
				font-size: 0.75rem;
				white-space: nowrap;
			}
		}
	}

	&.carregando>div {
		background-color: #CCC;

		& i,
		& span {
			color: #333;
		}
	}

	&.sucesso>div {
		background-color: #0A0;

		& i,
		& span {
			color: #FFF;
		}
	}

	&.erro>div {
		background-color: #C00;

		& i,
		& span {
			color: #FFF;
		}
	}

	&.forinput>div {
		top: -2px;
		bottom: inherit;
	}
}

/* Barra de Progresso Nativamente Estilizada */
.progress_bar {
	display: block;
	position: relative;
	background-color: #CCC;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
	border-radius: 5px;
	padding: 1px 0 !important;

	&>.bar_label {
		display: block;
		position: relative;
		color: #FFF;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		padding: 0.3em 0.5em;
		font-size: small;
		z-index: 100000;
	}

	&>.bar_bg {
		display: block;
		position: absolute;
		height: 100%;
		inset: 0 auto auto 0;
		width: 100%;
		background-color: #FAA732;
		border-radius: 5px;
		transition: width 1s linear;
		animation: progress-bar-stripes 2s linear infinite;
		background-image: linear-gradient(45deg,
				rgba(255, 255, 255, 0.15) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255, 255, 255, 0.15) 50%,
				rgba(255, 255, 255, 0.15) 75%,
				transparent 75%,
				transparent);
		background-size: 40px 40px;

		&.concluido {
			background-image: none;
		}
	}

	&.pequeno>.bar_label {
		padding: 0 0.5em;
		font-size: x-small;
	}

	&.verde>.bar_label,
	&.vermelho>.bar_label,
	&.azul>.bar_label {
		color: #FFF;
	}

	&.amarelo>.bar_label,
	&.laranja>.bar_label {
		color: #333;
	}

	&.verde>.bar_bg {
		background-color: #0C0;
	}

	&.vermelho>.bar_bg {
		background-color: #F20;
	}

	&.azul>.bar_bg {
		background-color: #06F;
	}

	&.amarelo>.bar_bg {
		background-color: #FD0;
	}

	&.laranja>.bar_bg {
		background-color: #F80;
	}

	&.cinza>.bar_bg {
		background-color: #555;
	}
}

#pgreload {
	position: fixed;
	top: 0;
	z-index: 999999999;
	width: 100%;
}

/* Componente Switch (Custom Checkbox Toggle) */
input[type="checkbox"].switch {
	display: inline-flex;
	align-items: center;
	appearance: none;
	border-radius: 12px;
	cursor: pointer;
	flex-shrink: 0;
	height: 24px !important;
	width: 40px !important;
	margin: 0;
	outline: none;
	position: relative;

	&::before {
		content: "";
		position: absolute;
		transition: background-color 0.15s ease-in-out;
		border: 0;
		border-radius: 12px;
		height: 18px;
		width: 34px;
		background: rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	&::after {
		content: "";
		position: absolute;
		transition: left 0.15s ease-in-out;
		height: 16px;
		width: 16px;
		top: 4px;
		left: 2px;
		background: #FFF;
		border-radius: 50%;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
		box-sizing: border-box;
	}

	&:checked {
		&::before {
			background: #3483FA;
		}

		&::after {
			left: 16px;
		}
	}

	&:disabled::before {
		background: #DDD;
	}
}

.campo:has(input[type="checkbox"].switch:disabled) span {
	color: #AAA;
}

.box-filtro {
	display: grid;
	padding: 5px !important;
	position: relative;

	& i {
		position: absolute;
		right: 12px;
		top: 12px;
	}
}

/* Indicador de Força de Senha */
.forca-senha {
	display: grid;
	gap: 3px;

	&.horizontal {
		display: flex;
		flex-wrap: wrap;
		gap: 0 20px;
	}

	&>div {
		display: flex;
		justify-content: flex-start;
		gap: 5px;
		color: #AAA;
		font-size: small;

		&>i {
			font-size: medium;
		}

		&.checked {
			color: #080;
			font-weight: bold;
		}
	}
}

/* Toggle Box Accordion/Expandível */
.box-toggle {
	padding: 0 0 24px 0 !important;
	max-width: 100%;
	position: relative;

	&>div:first-child {
		display: block;
		width: 100%;
		max-height: attr(data-height px, inherit);
		overflow: hidden;
		border-bottom: 1px solid #CCC;
	}

	&>span {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #CCC;
		padding: 3px 10px;
		font-size: 0.7rem;
		border-radius: 8px;
		cursor: pointer;
	}

	&.no-line>div:first-child {
		border-bottom: none;
	}

	&.left>span {
		left: 0;
		transform: none;
	}
}

/* Suporte SumoSelect */
.SumoSelect:has(p.check-categorias) {
	& li[class*="level-"]::after {
		content: '';
		width: 7px;
		height: 70%;
		position: absolute;
		top: -10%;
		left: 15px;
		border-left: 1px dashed #CCC;
		border-bottom: 1px dashed #CCC;
	}

	& li.level-1 {
		padding-left: 28px !important;

		&:has(span > i) {
			padding-left: 53px !important;
		}

		&::after {
			left: 15px;
		}
	}

	& li.level-2 {
		padding-left: 45px !important;

		&:has(span > i) {
			padding-left: 70px !important;
		}

		&::after {
			left: 32px;
		}
	}

	& li.level-3 {
		padding-left: 62px !important;

		&:has(span > i) {
			padding-left: 87px !important;
		}

		&::after {
			left: 49px;
		}
	}
}

/* Blocos de Registro / Log */
.bloco-log {
	&.reduzido {
		max-height: 80px;
		overflow: hidden;

		& thead td {
			font-size: 9px;
			padding: 2px 5px;
			background-color: transparent !important;
			color: #666;
			border-bottom: 1px solid #CCC;
		}
	}

	&>.tabela-lista thead tr td {
		background-color: #666;
	}
}