.vaa-painel {
	--vaa-verde: #187018;
	--vaa-escuro: #35363A;
	--vaa-texto: #4D4D4D;
	--vaa-cinza: #808080;
	--vaa-linha: #E6E6E6;
	--vaa-fundo: #F5F5F5;
	position: absolute;
	z-index: 2147483000;
	box-sizing: border-box;
	width: 320px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid var(--vaa-linha);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(26, 26, 26, .16);
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--vaa-texto);
}

.vaa-painel[hidden] { display: none; }

.vaa-painel:focus { outline: none; }

.vaa-painel *,
.vaa-painel *::before,
.vaa-painel *::after { box-sizing: border-box; }

.vaa-painel p { margin: 0; }

.vaa-titulo {
	font-size: 16px;
	font-weight: 600;
	color: var(--vaa-escuro);
}

.vaa-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vaa-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vaa-escuro);
}

.vaa-campo input {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var(--vaa-escuro);
	background: var(--vaa-fundo);
	border: 1px solid var(--vaa-linha);
	border-radius: 50px;
	outline: none;
}

.vaa-campo input:focus {
	background: #FFFFFF;
	border-color: var(--vaa-verde);
	box-shadow: 0 0 0 3px rgba(24, 112, 24, .15);
}

.vaa-lembrar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	cursor: pointer;
}

.vaa-lembrar input { accent-color: var(--vaa-verde); }

.vaa-erro,
.vaa-aviso {
	padding: 8px 12px;
	font-size: 12px;
	border-radius: 10px;
}

.vaa-erro {
	color: #8A1C1C;
	background: #FDECEC;
}

.vaa-aviso {
	color: var(--vaa-verde);
	background: #EAF6EA;
}

.vaa-erro[hidden],
.vaa-aviso[hidden] { display: none; }

.vaa-painel .vaa-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	padding: 0 20px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #FFFFFF;
	text-decoration: none;
	background: var(--vaa-verde);
	border: 0;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color .2s;
}

.vaa-painel .vaa-botao:hover,
.vaa-painel .vaa-botao:focus-visible { background: var(--vaa-escuro); color: #FFFFFF; }

.vaa-painel .vaa-botao[disabled] { opacity: .6; cursor: progress; }

.vaa-painel .vaa-link {
	align-self: center;
	font-size: 12px;
	color: var(--vaa-cinza);
	text-decoration: underline;
}

.vaa-painel .vaa-link:hover { color: var(--vaa-verde); }

.vaa-perfil {
	margin-top: 2px !important;
	font-size: 12px;
	color: var(--vaa-cinza);
}

.vaa-acoes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.vaa-painel .vaa-botao-sair { background: var(--vaa-escuro); }
.vaa-painel .vaa-botao-sair:hover { background: var(--vaa-verde); }

.vaa-acoes[hidden],
.vaa-form-perfil[hidden] { display: none; }

.vaa-form-perfil { margin-top: 16px; }

.vaa-campo small {
	font-weight: 400;
	color: var(--vaa-cinza);
}

.vaa-painel .vaa-link-botao {
	padding: 0;
	font: inherit;
	font-size: 12px;
	background: none;
	border: 0;
	cursor: pointer;
}

.vaa-restrito {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
	padding: 16px 20px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #35363A;
	background: #EAF6EA;
	border-radius: 16px;
}

.vaa-restrito button {
	padding: 10px 18px;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	color: #FFFFFF;
	background: #187018;
	border: 0;
	border-radius: 50px;
	cursor: pointer;
}

.vaa-restrito button:hover { background: #35363A; }

.vaa-painel.vaa-painel--embutido {
	position: static;
	width: 100%;
	max-width: none;
	max-height: none;
	margin-top: 8px;
	box-shadow: none;
}

@media (max-width: 767px) {
	.vaa-painel { padding: 16px; }
}
