:root {
	/* Palette - Status */
	--analise-bg: #ecc039;
	--analise-color: #000000;
	
	--pendente-bg: #FF9900;
	--pendente-color: #000000;

	--ativo-bg: #59c6d9;
	--ativo-color: #000000;

	--aguardando-bg: #FFCC00;
	--aguardando-color: #000000;

	--negado-bg: #bd3737;
	--negado-color: #FFFFFF;

	--bloqueado-bg: #bd3737;
	--bloqueado-color: #FFFFFF;

	--cancelado-bg: #bd3737;
	--cancelado-color: #FFFFFF;

	--removido-bg: #910f0f;
	--removido-color: #FFFFFF;

	--novo-bg: #6c5ce7;
	--novo-color: #FFFFFF;

	--breve-bg: #a69aff;
	--breve-color: #FFFFFF;
	
	--publicado-bg: #41b97d;
	--publicado-color: #FFFFFF;

	--pausado-bg: #ecc039;
	--pausado-color: #000000;
	
	--vendido-bg: #59c6d9;
	--vendido-color: #038ea7;
	
	--finalizado-bg: #59c6d9;
	--finalizado-color: #ffffff;

	--sucesso-bg: #59c6d9;
	--sucesso-color: #000000;

	--erro-bg: #bd3737;
	--erro-color: #FFFFFF;
	
	--info-bg: #b3ebf5;
	--info-color: #000000;
	
	--alerta-bg: #FF9900;
	--alerta-color: #000000;

	--venda-bg: #2e8b57;
	--venda-color: #FFFFFF;

	--locacao-bg: #2a6fdb;
	--locacao-color: #FFFFFF;

	--temporada-bg: #8a2be2;
	--temporada-color: #FFFFFF;

	/* Corporate Colors */
	--color-empresa-verde: #7EA54B;
	--color-empresa-verde-claro: #AAC470;
	--color-empresa-verde-escuro: #5C7937;
	--color-empresa-azul: #363D4F;
	--color-empresa-azul-claro: #5A5F6E;
	--color-empresa-azul-escuro: #282D3A;

	/* Brand Colors */
	--color-vermelho: #D92127;
	--color-laranja: #FF6600;
	--color-verde: #3e9f4f;

	--color-social-facebook: #3b5998;
	--color-social-instagram: #DD2A7B;
	--color-social-x: #000000;
	--color-social-pinterest: #c8232c;
	--color-social-google: #3b61bf;
	--color-social-youtube: #FF0000;
	--color-social-linkedin: #0e76a8;
	--color-social-tiktok: #010101;
	--color-social-kwai: #f05e24;
	--color-social-whatsapp: #47c956;

	--color-verde-agua: #dfe;
	--color-verde-fraco: #80d3a0;
	--color-amarelo: #FFCC29;
	--color-prata: #AD8F49;
	--color-preto: #5C5C5C;
	--color-branco: #FFFFFF;
	--color-cinza: #999999;
	--color-cinza-claro: #AAAAAA;
	--color-cinza-escuro: #777777;
	--color-azul: #0079c0;
	--color-azul-claro: #3facff;

	/* Global Theme Setup */
	/* --site-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; */
	--site-color: #333333;
	--site-bg: #FFFFFF;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-full: 9999px;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

/* Modern Scrollbar W3C Standard */
* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: #888888 #f9f9f9;
}


/* Base Elements */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

html,
body {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	min-height: 100vh;
}

body {
	font-family: var(--site-font-family);
	color: var(--site-color);
	background-color: var(--site-bg);
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

pre {
	white-space: pre-wrap;
	word-break: break-word;
	text-align: justify;
}

pre.tag {
	width: auto;
	white-space: normal;
}

/* Modern CSS Grid Columns replacing Column-Count */
[class*="columns"] {
	display: grid;
	align-items: center;
	justify-content: center;
	gap: 20px;
	grid-template-columns: repeat(var(--column, 1), minmax(0, 1fr));
}

.columns-1 { --column: 1; }
.columns-2 { --column: 2; }
.columns-3 { --column: 3; }
.columns-4 { --column: 4; }
.columns-5 { --column: 5; }

@media (max-width: 700px) {
	[class*="columns"].desktop {
		grid-template-columns: 1fr;
	}
}

/* Line Clamp Standardization */
[class*="max-line-"],
[class*="clamp-"] {
	display: -webkit-box;
	-webkit-line-clamp: var(--lines, 1);
	line-clamp: var(--lines, 1);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.max-line-1, .clamp-1 { --lines: 1; }
.max-line-2, .clamp-2 { --lines: 2; }
.max-line-3, .clamp-3 { --lines: 3; }
.max-line-4 { --lines: 4; }
.max-line-5 { --lines: 5; }

/* Flex Utility Lists */
[class*="lista-flex"] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3px 5px;
}

@media (max-width: 700px) {
	[class*="lista-flex"].desktop {
		display: block;
		& > * { margin: 3px 5px; }
	}
}

@media (min-width: 701px) {
	[class*="lista-flex"].mobile {
		display: block;
		& > * { margin: 3px 5px; }
	}
}

.lista-flex-end { justify-content: flex-end; }
.lista-flex-start { justify-content: flex-start; }
.lista-flex-around { justify-content: space-around; }
.lista-flex-between { justify-content: space-between; }

/* Grid Utility Lists */
[class*="lista-grid"] {
	display: grid;
	gap: 3px 10px;
}

@media (max-width: 700px) {
	[class*="lista-grid"].desktop {
		display: block;
		& > * { margin: 3px 0; }
	}
}

@media (min-width: 701px) {
	[class*="lista-grid"].mobile {
		display: block;
		& > * { margin: 3px 0; }
	}
}

.lista-grid-end { justify-content: flex-end; justify-items: end; }
.lista-grid-start { justify-content: flex-start; }
.lista-grid-around { justify-content: space-around; }
.lista-grid-between { justify-content: space-between; }

.lista-grid-icone {
	justify-content: flex-start;
	grid-template-columns: auto 1fr;
	align-items: center;
	
	& i {
		font-size: 1.5rem;
		color: currentColor;
	}
	& > svg { min-width: 24px; }
}

.lista-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lista-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lista-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lista-grid-5 { grid-template-columns: repeat(5, 1fr); }
.lista-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Dropdown Module */
.dropdown {
	position: relative;

	&::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(28, 29, 37, 0.5);
		opacity: 0;
		pointer-events: none !important;
		z-index: 100;
		transition: opacity 0.3s ease;
	}

	&.on {

		.dropdown-menu::after {
			content: "";
			position: absolute;
			bottom: -5px;
			left: 50%;
			translate: -50% 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 5px solid var(--color-branco);
		}
	}

	&.on::before {
		opacity: 0.8;
	}

	.dropdown-menu {
		position: relative;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		left: 50%;
		z-index: 9999;
		padding-top: 5px;
		translate: -50% 0;

		& > div {
			box-shadow: var(--shadow-lg);
			border-radius: var(--radius-md);
			background-color: var(--color-branco);
			padding: 10px;
			border-top: 1px solid #EEEEEE;
			color: #555555;
		}
	}
}

/* UI Helper Controls */
.cb-ico {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: var(--radius-md);

	& > div > i { font-size: 1.5rem; }
}

.ac_results {
	background-color: var(--color-branco);

	& .texto {
		font-size: 0.875rem;
		color: #333333;
		& strong { color: #000000; }
		&.pequeno { font-size: 0.75rem; color: #666666; }
	}

	& .texto_valor {
		font-size: 0.75rem;
		color: #666666;
	}

	& .tag_desconto {
		position: relative;
		font-size: 0.75rem;
		color: var(--color-branco);
		background-color: #00CC00;
		padding: 2px 5px;
		margin-left: 7px;

		&::before {
			content: "";
			position: absolute;
			top: 2px;
			left: -5px;
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			border-right: 5px solid #00CC00;
		}
	}

	& .avatar_ac {
		width: 40px;
		height: 40px;
		border-radius: var(--radius-full);
		background: center / cover no-repeat;
		border: 1px solid #CCCCCC;
	}
}

.ac_odd { background-color: #FAFAFA; }
.ac_over {
	background-color: #EEEEEE;
	& .texto { color: #333333; }
}

/* Modern Tables */
.tabela-lista {
	width: 100%;
	border-collapse: collapse;

	& > li,
	& > thead > tr > td,
	& > tbody > tr > td,
	& > tfoot > tr > td {
		padding: 6px 8px;
		text-align: left;
		font-size: 0.8rem;
		color: #333333;
	}

	&.nopadding > li,
	&.nopadding > thead > tr > td,
	&.nopadding > tbody > tr > td,
	&.nopadding > tfoot > tr > td { padding: 2px 5px; }

	& > thead > tr > td {
		font-size: 0.7rem;
		background-color: var(--color-empresa-azul);
		color: var(--color-branco);
		position: sticky;
		top: 0;
		z-index: 10;
	}

	& > tfoot > tr > td { border-top: 2px solid #556677; }

	&.grande > li,
	&.grande > thead > tr > td,
	&.grande > tbody > tr > td { padding: 10px; }

	& > tbody > tr > td div {
		word-break: break-all;
	}

	& > tbody > tr { background-color: #FEFEFE; }
	& > li:nth-child(odd),
	& > tbody > tr:nth-child(odd) { background-color: #F6F6F6; }

	& > li:hover,
	& > tbody > tr:hover { background-color: #DDEEFF; }

	& > li.selected, & > tbody > tr.selected { background-color: #FFFFAA; }
	& > li.checked, & > tbody > tr.checked { background-color: #FFFFAA; }
	& > li.on, & > tbody > tr.on { background-color: #AAFFCC; }

	& > li.off, & > tbody > tr.off {
		background-color: #EEEEEE;
		& * { color: #AFAFAF; }
	}

	&.linha > li,
	&.linha > tbody > tr > td { border-bottom: 1px solid #CCCCCC; }

	& span i {
		cursor: pointer;
		font-size: 1.125rem;
	}

	/* Color mappings */
	& .cinza:not(button), & .cinza:not(button) i { color: var(--color-cinza); }
	& .cinza-escuro:not(button), & .cinza-escuro:not(button) i { color: var(--color-cinza-escuro); }
	& .amarelo:not(button), & .amarelo:not(button) i { color: var(--color-amarelo); }
	& .verde:not(button), & .verde:not(button) i { color: var(--color-verde); }
	& .social-whatsapp:not(button), & .social-whatsapp:not(button) i { color: var(--color-social-whatsapp); }
	& .laranja:not(button), & .laranja:not(button) i { color: var(--color-laranja); }
	& .vermelho:not(button), & .vermelho:not(button) i { color: var(--color-vermelho); }
	& .azul:not(button), & .azul:not(button) i { color: var(--color-azul); }
	& .azul-claro:not(button), & .azul-claro:not(button) i { color: var(--color-azul-claro); }
}

.tabela-lista.tabela-lista-itens {
	border-collapse: separate;
	border-spacing: 0 8px;

	& > tbody > tr > td {
		border-block: 1px solid #CCCCCC;
		&:first-child {
			border-left: 1px solid #CCCCCC;
			border-radius: var(--radius-sm) 0 0 var(--radius-sm);
		}
		&:last-child {
			border-right: 1px solid #CCCCCC;
			border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
		}
	}

	& > tbody > tr:hover > td {
		border-block-color: #555555;
		background-color: var(--color-branco);
		&:first-child { border-left-color: #555555; }
		&:last-child { border-right-color: #555555; }
	}
}

/* Icon Typography Helpers */
span.ico {
	& i { font-size: 1.7rem; }
	&.pequeno i { font-size: 1rem; }
	&.grande i { font-size: 2rem; }
	&.cinza, &.cinza i { color: #AAAAAA; }
	&.cinza-escuro, &.cinza-escuro i { color: #666666; }
	&.amarelo, &.amarelo i { color: #FFFF00; }
	&.verde, &.verde i { color: #00AA00; }
	&.laranja, &.laranja i { color: #FF6600; }
	&.vermelho, &.vermelho i { color: #CC0000; }
	&.azul, &.azul i { color: var(--color-azul); }
}

/* Modern Typography Utilities */
.texto {
	text-align: justify;
    word-break: break-word;
	&.center { text-align: center; }
	&.bold { font-weight: 700; }
	&.pequeno { font-size: 0.75rem; }
	&.grande { font-size: 1rem; }
	&.extragrande { font-size: 1.25rem; }

	&.cinza { color: var(--color-cinza-escuro); }
	&.preto { color: var(--color-preto); }
	&.branco { color: var(--color-branco); }
	&.vermelho { color: var(--color-vermelho); }
	&.azul { color: var(--color-azul); }
	&.verde { color: var(--color-social-whatsapp); }
	&.amarelo { color: var(--color-amarelo); }
	&.laranja { color: var(--color-laranja); }
}

h1, h2, h3, h4, h5 {
	margin-top: 0;
	font-weight: 700;
	line-height: 1.2;
}

h1 { font-size: 1.5rem !important; }
h2 { font-size: 1.125rem !important; }
h3 { font-size: 0.875rem !important; }
h5 { font-size: 0.9rem !important; padding: 0; }

h1.center, h2.center, h3.center, h4.center { text-align: center; }

/* Dynamic Titles with :has Selector */
div.titulo:has(h1, h2, h3, h4) {
	margin-block: 50px;
	width: 100%;

	&.topo { margin: 0 0 50px 0; }

	& > div {
		display: block;

		& > div:has(+ h1, + h2, + h3, + h4) {
			color: #888888;
			font-size: 0.875rem;
			display: flex;
			align-items: center;
			gap: 10px;

			&::before {
				content: "";
				width: 15px;
				height: 1px;
				background-color: #888888;
			}
		}

		& > :is(h1, h2, h3, h4) {
			display: flex;
			align-items: stretch;
			gap: 15px;
			color: var(--color-empresa-azul);
			font-size: 28px !important;
			margin: 0;
			text-wrap: balance;
            letter-spacing: -2%;
            line-height: 100%;

			&::before {
				content: "";
				display: block;
				width: 6px;
				background-color: var(--botao-background-color, var(--color-azul));
				border-radius: var(--radius-md);
				flex-shrink: 0;
			}

			& + div {
				color: #000000;
				margin-top: 10px;
			}
		}
		& > h1 { font-weight: 700; }
		& > h2 { font-weight: 500; }
		& > h3, & > h4 { font-weight: 400; }
	}

	&.center {
		display: flex;
		justify-content: center;

		& > div {
			text-align: center;
			position: relative;
			width: auto;

			&::before {
				content: "";
				position: absolute;
				bottom: -10px;
				left: 50%;
				translate: -50% 0;
				width: 60%;
				height: 2px;
				background-color: var(--botao-background-color, var(--color-azul));
			}

			& > div:has(+ h1, + h2, + h3, + h4) {
				justify-content: center;
				&::after {
					content: "";
					width: 15px;
					height: 1px;
					background-color: #888888;
				}
			}

			& > :is(h1, h2, h3, h4) {
				justify-content: center;
				&::before { display: none; }
			}
		}
	}

	&.negativo {
		& > div {
			& > div:has(+ h1, + h2, + h3, + h4) {
				color: var(--color-branco);
				&::before { background-color: var(--color-branco); }
			}
			& > :is(h1, h2, h3, h4) {
				color: var(--color-branco);
				&::before { background-color: var(--color-branco); }
				& + div { color: var(--color-branco); }
			}
		}
		&.center > div > div:has(+ h1, + h2, + h3, + h4)::after {
			background-color: var(--color-branco);
		}
	}
}

@media (max-width: 700px) {
	div.titulo:has(h1, h2, h3, h4) > div > :is(h1, h2, h3, h4) {
		font-size: 2rem;
	}
}

.no-margin-top { margin-top: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }

/* Navigation and Headers */
.barra-cabecalho-mobile {
	box-shadow: var(--shadow-md);
	z-index: 99;
	width: 100%;

	&.flutuante { position: fixed; top: 0; left: 0; }

	& > div { padding: inherit !important; }

	& > div > .menu-topo-mobile {
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		gap: 20px;
		align-items: center;
		padding: 5px 20px;
		height: 50px;

		& i { font-size: 1.5rem; }
	}

	& .logomarca {
		height: calc(100% - 10px);
		display: flex;
		align-items: center;
		justify-content: center;

		& > div, & > a > div {
			width: 100%;
			height: 100%;
			font-size: 1.5rem;
		}

		& div.double {
			text-align: center;
			line-height: 70%;
			& > div:first-child { font-size: 0.7rem; color: #666666; }
			& > div:last-child {
				font-size: 1.2rem;
				font-weight: 700;
				text-transform: uppercase;
				color: var(--color-empresa-azul);
			}
		}
	}

	& > .busca {
		padding: 5px 20px 15px;
		display: none;

		& form {
			display: flex;
			align-items: center;
			gap: 5px;
			position: relative;

			& input {
				width: 100%;
				padding: 12px;
				font-size: 1rem;
			}

			& button {
				padding: 6px;
				background-color: transparent;
				border: none;
				color: #008106;
				position: absolute;
				right: 7px;
				font-size: 1rem;
			}
		}
	}

	& > div > .menu-topo-mobile.branco,
	& > .busca.branco {
		background-color: var(--color-branco);
		color: #333333;
	}
}





.site-linha-bloqueio {
    display: block;
    padding-bottom: 15px;
    padding-top: 15px;
    height: auto;
    border-bottom: 2px solid #333;
    font-size: medium;
    text-align: center;
    background: linear-gradient(-45deg,#FF6,#FD6);
    background-size: 300% 300%;
    animation: gradient 1s ease infinite;
    color: #000;
    position: fixed!important;
    width: 100%;
    z-index: 99999999
}

@keyframes gradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}


.site {
	position: relative;

	& > div {
		justify-items: center;
		position: relative;
		width: 100%;

		@media screen and (max-width: 700px) {
			display: block;
		}

		> div {
			width: 100%;
			max-width: var(--site-width);
			position: relative;
			padding: 0 20px;
		}

	}

	& > .sConteudo {
		padding: 0 0 100px;
		& > .corpo { padding: 0 20px; }
	}

}

@media screen and (max-width: 700px) {
	.no-margin-site {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.site-desenvolvimento {
	background-color: #EEEEEE;
	color: #5C5C5C;
	padding: 40px 0 100px;
	border-top: 1px solid #CCCCCC;

	& > div {
		display: grid;
		grid-template-columns: 100px 1fr 100px;
		justify-content: space-around;
		align-items: flex-start;
		gap: 30px;
		padding: 30px;
		font-size: 0.7rem;
		text-align: center;
		width: min(1300px, 100%);
		margin-inline: auto;
	}
}

@media (max-width: 700px) {
	.site-desenvolvimento > div { grid-template-columns: 1fr; justify-items: center; }
}


/* Contact Grid Section */
.grid-contato {
	display: grid;
	grid-template-columns: 3fr 2fr;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 30px;
}

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

.contato > div { padding-block: 10px; }

.contato-logo {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;

	& img {
		max-width: 250px;
		max-height: 150px;
	}
}

.contato-telefone {
	display: flex;
	gap: 10px 40px;
	flex-wrap: wrap;
	border-block: 1px solid #CCCCCC;
}

/* Filters UI */
.filtro-box {
	margin-top: 10px;
	background-color: var(--color-branco);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.05);

	& .filtro-titulo {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
		padding: 10px;
		font-weight: 700;

		& > div {
			display: flex;
			gap: 5px;
			align-items: center;
			font-size: .65rem;
		}

		& .qtde_usado {
			font-size: 0.75rem;
			padding: 4px 7px;
			background-color: #DD8005;
			color: var(--color-branco);
			border-radius: var(--radius-sm);
		}
	}

	& .filtro-conteudo {
		padding: 10px;

		& .filtro-filtro {
			display: grid;
			padding-block: 5px;
			position: relative;

			& input { width: auto; }
			& i {
				position: absolute;
				right: 10px;
				top: 14px;
				color: #999999;
			}
		}

		& .filtro-dados {
			width: 100%;
			max-height: 300px;
			overflow: auto;
			
			& ul {
				padding: 0;
				margin: 0;
				list-style: none;

				& li label {
					display: flex;
					gap: 5px;
					align-items: center;
					cursor: pointer;
					padding-block: 5px;
				}

				& li input[type="checkbox"] {
					width: 17px;
					height: 17px;
				}
			}
		}

		& .filtro-botoes { padding-block: 10px; }
	}

	&.fechado .filtro-conteudo { display: none; }
}

.filtros-usados {
	display: grid;
	gap: 5px;
	margin-top: 10px;

	& button {
		display: grid;
		grid-template-columns: 1fr auto;
		justify-content: space-between;
		font-size: 0.875rem;
		padding: 7px 10px;
		gap: 10px;
		width: 100%;

		& > div:first-child {
			display: grid;
			gap: 0;
            justify-items: start;
			& > div:first-child { font-size: 0.65rem; color: #CCCCCC; }
			& > div:last-child { font-weight: 700; }
		}

		& i {
			font-size: 0.65rem;
			align-self: flex-start;
			color: #AAAAAA;
		}

		&:hover {
			gap: 7px;
			& i { font-size: 0.875rem; color: #DD8005; }
		}
	}
}

/* Page Titles */
.titulopagina {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	margin-block: 10px;

	& > .titulo {
		font-size: 1.5rem;
		color: #333333;
		font-style: italic;
		font-weight: 700;
		border-bottom: 2px solid #CCCCCC;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 80px;
			max-width: 100%;
			height: 6px;
			background-color: #422462;
			border-radius: 0 9px 9px 0;
		}
	}

	&.center {
		justify-content: center;
		& > .titulo {
			text-align: center;
			&::after {
				left: 50%;
				translate: -50% 0;
				border-radius: 9px;
			}
		}
	}

	&.pequeno > .titulo { font-size: 1.125rem; }

	& > .direita, & > .info {
		font-size: 0.75rem;
		color: #5C5C5C;
	}

	& > .info {
		width: 100%;
		padding-block: 5px;
	}
}

/* Form Helper Component */
.aba-input-info {
	font-size: 0.7rem;
	color: #AAAAAA;
	background-color: #F8F8F8;
	border: 1px solid #EEEEEE;
	border-top: none;
	border-radius: 0 0 3px 3px;
	margin-inline: 3px;
	text-align: center;
}

.empty-hidden:empty,
.boxinfo:empty,
.overflow.empty:empty,
.barra-mensagem-topo:empty,
#venda-info-unidade:empty {
	display: none;
}

.boxinfo {
	padding: 5px 7px !important;
	background-color: #F8F8F8;
	border: 1px solid #EEEEEE;

	&.contorno { border-color: #CCCCCC; padding: 5px; }
	&.pequeno { font-size: 0.7rem; }
	&.verde { background-color: #009900; color: var(--color-branco); }
	&.laranja { background-color: #FF6600; color: var(--color-branco); }
	&.amarelo { background-color: #FFCC29; }
	&.vermelho { background-color: #D92127; color: var(--color-branco); }
}

.box-sombra {
	background-color: var(--color-branco);
	border-radius: var(--radius-md);
	padding: 10px !important;
	box-shadow: var(--shadow-md);
}

.barratoplista {
	display: flex;
	justify-content: space-between;
	padding: 5px 10px;
	background: #ededed;
}

.barratoplista:empty {
	display: none;
}

.form-ordem, .ordemLista {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 0.75rem;
	color: #666666;
}

.ordemLista {
	width: max-content;

	& span { font-size: 0.625rem; padding-right: 10px; }
	& select {
		margin: 0;
		font-size: 0.75rem;
		color: #666666;
		background-color: var(--color-branco);
		border: 1px solid #EEEEEE;
		padding: 5px 10px;
		border-radius: var(--radius-sm);

		&:focus {
			background-color: #EEEEEE;
			border-color: #CCCCCC;
		}
	}
}

.barrapaginacao {
	margin: 2px 0;
	float: right;

	& ul {
		padding: 0;
		margin: 0;
		display: flex;
		gap: 2px;
		list-style: none;

		& li {
			font-size: 0.625rem;
			color: #666666;
			border: 1px solid #EEEEEE;
			padding: 5px 10px;
			cursor: pointer;
			background-color: var(--color-branco);
			border-radius: var(--radius-sm);

			&:hover {
				border-color: #CCCCCC;
				background-color: #EEEEEE;
			}

			&.off {
				color: #CCCCCC;
				border-color: #CCCCCC;
				&:hover { background-color: var(--color-branco); }
			}

			&.on {
				border-color: #CCCCCC;
				color: var(--botao-color, #FFFFFF);
				background-color: var(--botao-background-color, var(--color-azul));
			}
		}
	}
}

/* Dropdown Navigation Menu */
.menu-drop {
	display: inline-block;
	position: relative;

	& > .main {
		display: inline-block;
		cursor: pointer;
		& span i { font-size: 1.1rem; }
	}

	&:has(ul.content:empty) .main { display: none; }

	& > .content {
		display: none;
		position: absolute;
		top: 30px;
		left: -10px;
		z-index: 1000;
		padding: 0;
		margin: 0;
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-md);

		&.nowrap span { white-space: nowrap; }
		&.center { left: 50%; translate: -50% 0; }
		&.right { left: auto; right: -5px; }

		&::before {
			content: "";
			position: absolute;
			top: -6px;
			left: 12px;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid var(--color-branco);
		}

		&.center::before { left: 50%; translate: -50% 0; }
		&.right::before { left: auto; right: 7px; }

		& > li {
			list-style: none;
			background-color: var(--color-branco);

			& > div, & > a > div {
				padding: 10px 20px 10px 10px;
				cursor: pointer;
				display: flex;
				gap: 10px;
				align-items: center;
			}

			&:first-child, &:first-child > div, &:first-child > a > div {
				border-radius: var(--radius-sm) var(--radius-sm) 0 0;
			}

			&:last-child, &:last-child > div, &:last-child > a > div {
				border-radius: 0 0 var(--radius-sm) var(--radius-sm);
			}

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

			& i { color: #333333; font-size: 1rem; }
			& span { color: #333333; font-size: 0.8rem; }

			/* Theme Variants */
			&.vermelho span, &.vermelho i { color: #D92127; }
			&.laranja span, &.laranja i { color: #FF6600; }
			&.verde span, &.verde i { color: #009900; }
			&.amarelo span, &.amarelo i { color: #FFCC29; }
			&.prata span, &.prata i { color: #AD8F49; }
			&.azul span, &.azul i { color: #0079c0; }

			&.bg-vermelho { background-color: #D92127; &:hover { background-color: #E04B50; } span, i { color: var(--color-branco); } }
			&.bg-laranja { background-color: #FF6600; &:hover { background-color: #FF8833; } span, i { color: var(--color-branco); } }
			&.bg-verde { background-color: #009900; &:hover { background-color: #00AB00; } span, i { color: var(--color-branco); } }
			&.bg-amarelo { background-color: #FFCC29; &:hover { background-color: #FFDD3A; } span, i { color: #333333; } }
			&.bg-prata { background-color: #AD8F49; &:hover { background-color: #BE9F5A; } span, i { color: var(--color-branco); } }
			&.bg-azul { background-color: #0079c0; &:hover { background-color: #118AD1; } span, i { color: var(--color-branco); } }
		}
	}
}

/* Tags Component Framework */
.lista-tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	width: fit-content;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 7px;
	border-radius: 0;
	font-size: 0.8rem;
	white-space: nowrap;
	gap: 5px;

	&.total { width: 100%; }
	&.center { justify-content: center; text-align: center; }
	& i { color: inherit !important; }

	&.mini { padding: 0 4px; font-size: 0.6rem; }
	&.pequeno { padding: 2px 4px; font-size: 0.7rem; }
	&.grande { padding: 7px 10px; font-size: 0.9rem; }

	/* Color Schemes */
	&.cinza { background-color: #DDDDDD; color: #666666 !important; }
	&.amarelo { background-color: #FFFF00; color: #333333 !important; }
	&.verde { background-color: #00CC00; color: var(--color-branco) !important; }
	&.verde-fraco { background-color: #59d39e; color: var(--color-branco) !important; }
	&.laranja { background-color: #FF6600; color: var(--color-branco) !important; }
	&.vermelho { background-color: #EE0000; color: var(--color-branco) !important; }
	&.azul { background-color: #0079c0; color: var(--color-branco) !important; }
	&.rosa { background-color: deeppink; color: var(--color-branco) !important; }
	&.branco { background-color: var(--color-branco); color: #333333 !important; }
	&.preto { background-color: #333333; color: var(--color-branco) !important; }
	&.empresa-verde { background-color: var(--color-empresa-verde); color: var(--color-branco) !important; }
	&.empresa-azul { background-color: var(--color-empresa-azul); color: var(--color-branco) !important; }

	&.txt-cinza { color: #777777; }
	&.txt-amarelo { color: #FFFF00; }
	&.txt-verde { color: #00CC00; }
	&.txt-verde-fraco { color: #59d39e; }
	&.txt-laranja { color: #FF6600; }
	&.txt-vermelho { color: #EE0000; }
	&.txt-azul { color: #0079c0; }
	&.txt-rosa { color: deeppink; }
	&.txt-branco { color: var(--color-branco); }

	/* CSS Variables mapped status */
	&.aguardando { background-color: var(--aguardando-bg); color: var(--aguardando-color); }
	&.pendente { background-color: var(--pendente-bg); color: var(--pendente-color); }
	&.analise { background-color: var(--analise-bg); color: var(--analise-color); }
	&.ativo { background-color: var(--ativo-bg); color: var(--ativo-color); }
	&.breve { background-color: var(--breve-bg); color: var(--breve-color); }
	&.finalizado { background-color: var(--finalizado-bg); color: var(--finalizado-color); }
	&.bloqueado { background-color: var(--bloqueado-bg); color: var(--bloqueado-color); }
	&.cancelado { background-color: var(--cancelado-bg); color: var(--cancelado-color); }
	&.negado { background-color: var(--negado-bg); color: var(--negado-color); }
	&.removido { background-color: var(--removido-bg); color: var(--removido-color); }
	&.venda { background-color: var(--venda-bg); color: var(--venda-color); }
	&.locacao { background-color: var(--locacao-bg); color: var(--locacao-color); }
	&.novo { background-color: var(--novo-bg); color: var(--novo-color); }
	&.publicado { background-color: var(--publicado-bg); color: var(--publicado-color); }
	&.pausado { background-color: var(--pausado-bg); color: var(--pausado-color); }
	&.vendido { background-color: var(--vendido-bg); color: var(--vendido-color); }
}

/* Icon Text Compound Tags */
.tag-i, .tag-ico {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 3px;

	& > div { display: grid; }

	& span {
		font-size: 0.7rem;
		color: #5C5C5C;
		white-space: nowrap;
		padding: 0;
	}

	& > div > span:last-child {
		font-size: 0.6rem;
		color: #999999;
	}

	&.grande {
		gap: 10px;
		& span { font-size: 0.9rem; color: #333333; }
		& > div > span:last-child { font-size: 0.8rem; color: #666666; }
		& i { font-size: 0.85rem; padding: 4px; }
	}

	&.pequeno {
		& i { font-size: 0.75rem; padding: 1px; }
		& span { font-size: 0.7rem; color: #666666; }
		& > div > span:last-child { font-size: 0.55rem; color: #666666; }
	}

	&.active span { color: #000000; }
	&.disabled span { color: #AAAAAA; }
}

.tag-i i { font-size: 1rem; }
.tag-ico i {
	font-size: 0.75rem;
	color: var(--color-branco) !important;
	padding: 3px;
	background-color: #AAAAAA;
	border-radius: var(--radius-full);
}

.tag-ico.disabled i { background-color: #BBBBBB; }

/* Status Color Mapping for Icon Tags */
.tag-ico.cinza i { background-color: var(--color-cinza); }
.tag-i.cinza i { color: var(--color-cinza); }
.tag-ico.verde i { background-color: var(--color-verde); }
.tag-i.verde i { color: var(--color-verde); }
.tag-ico.verde-fraco i { background-color: var(--color-verde-fraco); }
.tag-i.verde-fraco i { color: var(--color-verde-agua); }
.tag-ico.amarelo i { background-color: var(--color-amarelo); }
.tag-i.amarelo i { color: var(--color-amarelo); }
.tag-ico.laranja i { background-color: var(--color-laranja); }
.tag-i.laranja i { color: var(--color-laranja); }
.tag-ico.azul i { background-color: var(--color-azul); }
.tag-i.azul i { color: var(--color-azul); }
.tag-ico.azul-fraco i { background-color: var(--color-azul-claro); }
.tag-i.azul-fraco i { color: var(--color-azul-claro); }
.tag-ico.vermelho i { background-color: var(--color-vermelho); }
.tag-i.vermelho i { color: var(--color-vermelho); }

/* Avatar Framework using aspect-ratio */
.avatar {
	width: 50px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-full);
	border: 1px solid #DDDDDD;
	background: var(--color-branco) center / cover no-repeat content-box;
	position: relative;

	&.transparent { border: none; background-color: transparent; }
	&.contain { background-size: contain; }
	&.total { margin: -10px; }
	&.total-v { margin-block: -10px; }
	&.total-h { margin-inline: -10px; }

	&.grande {
		width: 100px;
		height: 100px;
		aspect-ratio: auto;
	}

	&.grande.banner {
		width: 100px;
		height: 80px;
		aspect-ratio: auto;
	}

	&.quadrado { border-radius: 0; }

	&.banner {
		border-radius: 0;
		border: none;
		background-color: transparent;
	}

	& > span {
		font-size: 0.625rem;
		color: var(--color-branco);
		padding: 3px 3px 3px 15px;
		background: #888888 url("../../img/ico-photo-branco.png") left 3px center / 10px no-repeat;
		border-radius: 3px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
}

/* Fieldset and Legends */
fieldset {
	border: 1px solid #CCCCCC;
	padding: 0.35em 0.75em 0.625em;

	& > legend {
		font-size: 0.85rem;
		color: #333333;
		font-weight: 700;
		font-style: italic;

		& .info {
			font-size: 0.75rem;
			color: #999999;
			font-weight: 400;
			font-style: normal;
		}
	}

	&.divisor {
		border: none;
		border-top: 1px solid #CCCCCC;
		padding: 5px 0;
		position: relative;

		& > legend {
			font-size: 0.875rem;
			color: #000000;
			font-style: normal;
			padding: 10px 5px;
			text-shadow: 0 0 2px #FFFFFF;
			border-bottom: none;
		}

		&.hover:hover { background-color: #FFFFDD; }
		&.branco { border-color: #EEEEEE; background-color: var(--color-branco); padding: 5px 15px; & > legend { color: #000000; } }
		&.cinza { border-color: #CCCCCC; background-color: #F8F8F8; padding: 5px 15px; }
	}

	&.contorno { border: 1px solid #CCCCCC; padding: 3px 10px; }
}

/* Telephones and Addresses Framework */
.lista-enderecos { gap: 30px; &.horizontal { display: flex; } }
.endereco { text-align: left; }

.lista-telefones {
	gap: 20px;
	display: grid;
	&.horizontal { display: flex; }
}

@media (max-width: 700px) {
	.lista-telefones.horizontal { display: grid; gap: 20px; }
}

.telefone {
	text-align: left;

	&.horizontal, & > div:first-child, & > a > div:first-child {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 7px;
		align-items: center;
	}

	& .conteudo {
		& .nome { font-size: 0.75rem; line-height: 0.7; }
		& .numero {
			display: flex;
			gap: 5px;
			align-items: flex-end;
			& .ddd { font-size: 0.75rem; }
			& .tel { font-size: 1rem; white-space: nowrap; }
		}
	}

	& > .botoes {
		display: flex;
		gap: 5px;
		align-items: center;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;

		& button.ligar {
			font-size: 0.625rem;
			padding: 4px 6px;
			border-radius: 15px;
		}
	}

	&.pequeno {
		& i { font-size: 0.8rem; }
		& .conteudo {
			& .nome, & .numero .ddd { font-size: 0.65rem; }
			& .numero .tel { font-size: 0.8rem; }
		}
		& > .botoes button.ligar { font-size: 0.67rem; padding: 5px 7px; }
	}

	&.grande {
		& i { font-size: 1.2rem; }
		& .conteudo {
			& .nome, & .numero .ddd { font-size: 0.8rem; }
			& .numero .tel { font-size: 1.1rem; font-weight: 700; }
		}
		& > .botoes button.ligar { font-size: 0.8rem; padding: 5px 10px; }
	}
}

/* Social Media Framework */
.lista-sociais {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;

	& > div, & > a > div {
		transition: opacity 0.3s ease;
		&:hover { opacity: 0.8; }
		& > i { font-size: 1.5rem; color: #555555; }
	}

	&.circulo > div, &.circulo > a > div { border-radius: var(--radius-full); }
	&.quadro.radius > div, &.quadro.radius > a > div { border-radius: var(--radius-sm); }

	&.quadro > div, &.circulo > div, &.quadro > a > div, &.circulo > a > div {
		padding: 7px;
		background-color: #555555;
		& > i { font-size: 1.2rem; color: var(--color-branco); }
	}

	&.pequeno {
		& > div > i, & > a > div > i { font-size: 0.75rem; }
		&.quadro > div, &.circulo > div, &.quadro > a > div, &.circulo > a > div { padding: 3px 6px; }
	}

	&.grande {
		& > div > i, & > a > div > i { font-size: 1.8rem; }
		&.quadro > div, &.circulo > div, &.quadro > a > div, &.circulo > a > div { padding: 10px; & > i { font-size: 1.5rem; } }
	}

	&.extragrande {
		& > div > i, & > a > div > i { font-size: 2.2rem; }
		&.quadro > div, &.circulo > div, &.quadro > a > div, &.circulo > a > div { padding: 15px; & > i { font-size: 1.8rem; } }
	}

	&.branco {
		& > div > i, & > a > div > i { color: var(--color-branco); }
		&.quadro > div, &.circulo > div, &.quadro > a > div, &.circulo > a > div {
			background-color: var(--color-branco);
			& > i { color: #000000; }
		}
	}

	/* Brand specific colors */
	&.color {
		& .facebook { color: var(--color-social-facebook); } &.quadro .facebook, &.circulo .facebook { background-color: var(--color-social-facebook); }
		& .instagram { color: var(--color-social-instagram); } &.quadro .instagram, &.circulo .instagram { background-color: var(--color-social-instagram); }
		& .x { color: var(--color-social-x); } &.quadro .x, &.circulo .x { background-color: var(--color-social-x); }
		& .pinterest { color: var(--color-social-pinterest); } &.quadro .pinterest, &.circulo .pinterest { background-color: var(--color-social-pinterest); }
		& .google { color: var(--color-social-google); } &.quadro .google, &.circulo .google { background-color: var(--color-social-google); }
		& .youtube { color: var(--color-social-youtube); } &.quadro .youtube, &.circulo .youtube { background-color: var(--color-social-youtube); }
		& .linkedin { color: var(--color-social-linkedin); } &.quadro .linkedin, &.circulo .linkedin { background-color: var(--color-social-linkedin); }
		& .tiktok { color: var(--color-social-tiktok); } &.quadro .tiktok, &.circulo .tiktok { background-color: var(--color-social-tiktok); }
		& .kwai { color: var(--color-social-kwai); } &.quadro .kwai, &.circulo .kwai { background-color: var(--color-social-kwai); }
		& .whatsapp { color: var(--color-social-whatsapp); } &.quadro .whatsapp, &.circulo .whatsapp { background-color: var(--color-social-whatsapp); }
		&.quadro i, &.circulo i { color: var(--color-branco); }
	}
}

/* Separator Line */
.separador {
	border-top: 1px solid #CCCCCC;
	margin-block: 12px;
	text-align: center;
	position: relative;
	list-style: none;

	& > span {
		font-size: 1.125rem;
		color: #666666;
		background-color: var(--site-background-color, #FFFFFF);
		padding-inline: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}

	&.pequeno { margin-block: 10px; & > span { font-size: 0.875rem; } }
	&.grande { margin-block: 15px; & > span { font-size: 1.25rem; font-weight: 700; } }
	&.extragrande { margin-block: 20px; & > span { font-size: 1.5rem; font-weight: 700; } }
	&.branco > span { background-color: var(--color-branco); }
}

.overflow {
	max-width: 100%;
	max-height: 350px;
	overflow: auto;
}

/* Image Box Framework */
.box_texto {
	font-size: 1rem;
	text-align: justify;

	& span { vertical-align: inherit !important; margin-right: inherit !important; }
	& img {
		max-width: 100%;
		height: auto;
		margin: 10px;
	}
	& a:first-child > img, & img:first-child { margin-top: 0; margin-left: 0; }
}

.lista-imagens {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	&.center { justify-content: center; }

	& .imagem {
		border: 1px solid #CCCCCC;
		border-radius: var(--radius-sm);
		background: var(--color-branco) center / cover no-repeat;
		object-fit: cover;
		width: 150px;
		height: 100px;

		&.pequeno { width: 80px; height: 50px; }
		&.grande { width: 300px; height: 200px; }
		&.extragrande { width: 600px; height: 400px; }
	}

	& img.imagem.auto {
		object-fit: contain;
		height: auto;
	}
}

.lista_fotos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;

	& .foto {
		width: 100%;
		height: 160px;
		border: 1px solid #CCCCCC;
		background: var(--color-branco) center / cover no-repeat;
		border-radius: 3px;
	}
}

@media (max-width: 700px) {
	.lista_fotos {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		& .foto { height: 120px; }
	}
}

/* Status Native Select Styling */
select.select_status {
	& option { background-color: var(--color-branco); color: #000000; }
	&:has(option[value="aceito"]:checked) { background-color: var(--aceito-bg); color: var(--aceito-color); }
	&:has(option[value="aguardando"]:checked) { background-color: var(--aguardando-bg); color: var(--aguardando-color); }
	&:has(option[value="analise"]:checked) { background-color: var(--analise-bg); color: var(--analise-color); }
	&:has(option[value="ativo"]:checked) { background-color: var(--ativo-bg); color: var(--ativo-color); }
	&:has(option[value="bloqueado"]:checked) { background-color: var(--bloqueado-bg); color: var(--bloqueado-color); }
	&:has(option[value="cancelado"]:checked) { background-color: var(--cancelado-bg); color: var(--cancelado-color); }
	&:has(option[value="negado"]:checked) { background-color: var(--negado-bg); color: var(--negado-color); }
	&:has(option[value="novo"]:checked) { background-color: var(--novo-bg); color: var(--novo-color); }
	&:has(option[value="pausado"]:checked) { background-color: var(--pausado-bg); color: var(--pausado-color); }
	&:has(option[value="pendente"]:checked) { background-color: var(--pendente-bg); color: var(--pendente-color); }
	&:has(option[value="publicado"]:checked) { background-color: var(--publicado-bg); color: var(--publicado-color); }
	&:has(option[value="removido"]:checked) { background-color: var(--removido-bg); color: var(--removido-color); }
	&:has(option[value="vendido"]:checked) { background-color: var(--vendido-bg); color: var(--vendido-color); }
}

/* Messages and Alerts Component */
.boxmsg {
	display: flex;
	gap: 5px;
	font-size: 1rem;
	color: #555555;

	& > i { font-size: 1.25rem; color: #555555; }

	&.grande {
		display: grid;
		justify-items: center;
		gap: 0;
		font-size: 1.25rem;
		& > i { font-size: 2.5rem; }
	}

	&.sucesso, &.sucesso > i { color: #009900; }
	&.erro, &.erro > i { color: #FF0000; }
}

.barra-mensagem-topo {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	padding: 5px;
	background-color: rgba(233, 212, 155, 0.9);
}

/* E-Commerce Grid Components */
.grid-carrinho {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;

	& > div {
		border: 1px solid #DDDDDD;
		border-radius: var(--radius-sm);
		padding: 20px;
		font-size: 0.82rem;
		background-color: var(--color-branco);

		& > .titulo {
			font-weight: 700;
			margin-bottom: 10px;
			font-size: 1rem;
		}

		& > .bloco {
			padding-left: 20px;
			padding-block: 5px;

			&.grid {
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				gap: 10px;
				padding-left: 0;

				& > i {
					font-size: 1.5rem;
					color: var(--botao-background-color, var(--color-azul));
				}
			}
		}

		& > .compra-segura {
			padding: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 700;
			font-size: 1rem;
			color: #666666;
			& i { font-size: 1.5rem; }
		}
	}
}

@media (max-width: 900px) {
	.grid-carrinho { grid-template-columns: 1fr; }
}

.lista-forma-pagamento {
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
	list-style: none;

	& > li {
		background-color: #EEEEEE;
		&.disabled { background-color: #AAAAAA; }
		&.active {
			background-color: #DDFFEE;
			& > .forma {
				background-color: #D0F0E0;
				& div.titulo, & > i { color: #000000; font-weight: 700; }
				& > img { filter: grayscale(100%) brightness(0); }
			}
		}

		& > .forma {
			display: grid;
			grid-template-columns: auto auto 1fr;
			gap: 15px;
			align-items: center;
			padding: 10px;
			font-size: 0.85rem;
			cursor: pointer;

			& > div > div:first-child {
				display: grid;
				grid-template-columns: 1fr auto;
				gap: 15px;
				align-items: center;
			}

			& > i { font-size: 1.5rem; color: #999999; }
			& > img { max-width: 24px; filter: grayscale(100%) brightness(1); }
			& div.forma_parcelamento {
				color: #666666;
				font-size: 0.7rem;
				& b { color: #333333; font-size: 0.85rem; }
			}
		}

		& > .conteudo { display: none; padding: 10px; }
	}
}

.campo-cpf-nascimento {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: flex-start;
	gap: 5px;
}

@media (max-width: 1000px) and (min-width: 900px) {
	.campo-cpf-nascimento { grid-template-columns: 1fr; }
}

/* Modern Card UI Components */
.card {
	cursor: pointer;
	background-color: var(--color-branco);
	border: 1px solid #CCCCCC;
	border-radius: var(--radius-md);
	transition: background-color 0.2s ease, border-color 0.2s ease;
	padding: 10px !important;
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 10px;
	align-items: start;

	&:has(> .cabecalho), &:not(:has(> .icone)) { grid-template-columns: 1fr; }

	&:hover {
		box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.2);
		background: linear-gradient(45deg, #cfebf1 0%, #FFF 50%, #FFF 100%);
	}

	& > .cabecalho {
		padding: 10px;
		margin: -10px -10px 0;
		border-radius: var(--radius-md) var(--radius-md) 0 0;
		display: grid;
		justify-content: center;

		& img { height: 30px; aspect-ratio: 16 / 6; }
		&.negative > img { filter: brightness(0) invert(1); }
	}

	& > .conteudo {
		display: grid;
		gap: 5px;
		& > .icone img { height: 30px; aspect-ratio: 16 / 6; }
	}

	& > .base { align-self: flex-end; }
	&:not(:has(> .cabecalho)) > .base { grid-column: span 2; }

	& h5 { margin: 0; }
	&:has(> .cabecalho) h5, &:has(> .cabecalho) .info { text-align: center; }

	& i { font-size: 1.5rem; color: #00BBBB; }
	& .info { font-size: 0.8rem; color: #777777; }

	&.center {
		text-align: center;
		& > .conteudo { justify-content: center; }
	}

	&.disabled {
		background-color: #F8F8F8;
		& * { filter: grayscale(100%); opacity: 0.7; }
	}

	&.alert { background-color: #FDE68A; border-color: #FDE68A; &:hover { background-color: #FFF1C7; } }
	&.error { background-color: #FFD0CC; border-color: #FFD0CC; &:hover { background-color: #FFE5E3; } }
	&.sucess { background-color: #B8F2CD; border-color: #B8F2CD; &:hover { background-color: #DCFAE6; } }
	&.selected { background-color: #7CDCFC; border-color: #7CDCFC; &:hover { background-color: #DEF3FC; } }
	&.note { 
		background-color: #fff7c9; 
		border-color: #faeb94; 
		&:hover { 
			background: none;
			background-color: #f7e062; 
		} 
	}
}

/* Visibility Utilities */
.hide { display: none !important; }
@media (min-width: 701px) { .hide-desktop { display: none !important; } }
@media (max-width: 700px) { .hide-mobile { display: none !important; } }

/* Modern Tooltips via Pseudo-elements */
[data-tooltip] {
	position: relative;

	&::after {
		display: none;
		position: absolute;
		top: -5px;
		left: calc(100% + 2px);
		width: max-content;
		max-width: 200px;
		padding: 10px;
		border-radius: var(--radius-sm);
		content: attr(data-tooltip);
		color: #333333;
		background-color: var(--color-branco);
		border: 1px solid #CCCCCC;
		box-shadow: var(--shadow-md);
		z-index: 2;
		text-align: center;
	}

	&:hover::after { display: block; }
}

/* Category Trees & Interactive Status */
.lista-categorias {
	padding-left: 0;

	& ul { padding-left: 17px; }
	& li {
		list-style: none;

		& > div {
			position: relative;
			padding-block: 2px;
			&:hover { background-color: #FAFAFA; }
		}
	}

	& label {
		display: flex;
		gap: 5px;
		opacity: 0.65;
		cursor: pointer;
		&:has(input[type="checkbox"]:checked) { opacity: 1; }
	}

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

.status-linha {
	font-size: 0.7rem;
	color: #333333;
	position: relative;
	padding: 3px 0 3px 20px !important;

	&::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 0;
		width: 13px;
		height: 13px;
		background-color: #666666;
		box-shadow: var(--shadow-sm);
		border-radius: var(--radius-full);
	}

	&.verde::after { background-color: var(--color-verde); }
	&.amarelo::after { background-color: var(--color-amarelo); }
	&.laranja::after { background-color: var(--color-laranja); }
	&.vermelho::after { background-color: var(--color-vermelho); }
	&.cinza::after { background-color: var(--color-cinza-claro); }
	&.branco::after { background-color: var(--color-branco); }
	&.azul::after { background-color: var(--color-azul-claro); }
}

/* Map View Component */
.mapaView {
	cursor: grab;
	overflow: auto;
	padding: 0 !important;
	position: relative;

	& > div {
		user-select: none;
		background: center / contain no-repeat;
		width: 3000px;
		height: 3000px;
		position: relative;

		& > span {
			position: absolute;
			border-radius: var(--radius-full);
			padding: 5px !important;
			font-size: 0.85rem;
			background-color: var(--disponivel-background-color, #59c6d9);
			color: var(--disponivel-color, #000000);
			cursor: grabbing;
			pointer-events: auto !important;
			z-index: 1000 !important;

			&.active {
				animation: mapaActive 1.5s infinite;
			}
		}
	}
}

@keyframes mapaActive {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
	70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

#venda-info-unidade {
	margin: 5px 0 30px;
	padding: 5px 20px !important;
	background-color: #DEEAF9;

	& > div {
		display: flex;
		align-items: flex-start;
		gap: 15px 30px;
		flex-wrap: wrap;
	}
}

@media (max-width: 700px) {
	#venda-info-unidade > div {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Modern Responsive Dashboard Tags */
.dashboard-lista-tags {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.dashboard-tag {
	display: grid;
	align-items: center;
	gap: 15px;
	padding: 20px;
	background-color: #EEEEEE;
	color: #000000;
	border-radius: var(--radius-sm);
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

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

	&.button {
		cursor: pointer;
		&:hover {
			background-color: #0A95E6;
			color: var(--color-branco);
			box-shadow: var(--shadow-md);
		}
	}

	&:has(> div > i) {
		grid-template-columns: auto 1fr;
	}

	& > div > i {
		font-size: 1.5rem;
		background: rgba(255, 255, 255, 0.2);
		padding: 10px;
		border-radius: var(--radius-full);
	}
}





.pagina-status {
    display: flex;
    gap: 10px;
	
    & i {
        font-size: 60px;
    }

    & .code {
        font-size: 12px;
        color: #999;
    }

    & .title {
        font-size: 24px;
        font-weight: bold;
    }

    & .text {
        font-size: 14px;
        color: #444;
    }
	
    &.erro {
        & i, 
		& .title {
            color: #FF0000;
        }
    }
	
    &.info {
        & i, 
		& .title {
            color: #ffae00;
        }
    }
	
    &.sucesso {
        & i, 
		& .title {
            color: #33d4ac;
        }
    }
	
    &.pena {
        & i, 
		& .title {
            color: var(--botao-background-color);
        }
    }
}