/*
ESTILO EXCLUSIVO DO DIRETÓRIO VAGAS (PÁGINA PÚBLICA DE ANÚNCIO DE VAGAS)
Fica na própria pasta vagas e é referenciado diretamente pela cadastrar.php (sem constante).
Ao alterar este arquivo, atualize o ?versao= no link da cadastrar.php.

As cores de destaque vêm da entidade (emp_cor_fundo / emp_cor_fonte) e são definidas
na própria cadastrar.php, nas variáveis --cor-destaque, --cor-destaque-txt e --cor-destaque-rgb.
Não depende do Bootstrap nem do estilo.css.
*/

/* =========================================================
   CORES
   ========================================================= */

:root {
	--cor-texto:       #2B2F38;
	--cor-texto-suave: #5A6170;
	--cor-linha:       #DCE3EA;
	--cor-borda-campo: #C5CFDA;
	--cor-branco:      #FFFFFF;
	--cor-fundo:       rgba(var(--cor-destaque-rgb), .05);
	--cor-suave:       rgba(var(--cor-destaque-rgb), .10);
	--cor-foco:        rgba(var(--cor-destaque-rgb), .28);

	--fonte-texto: 'Inter', Arial, sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */

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

html { background: var(--cor-branco); }

/* fundo levemente tingido com a cor da entidade (cor sólida com transparência sobre o branco) */
body {
	margin: 0;
	min-height: 100vh;
	background: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-texto);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-weight: 600; line-height: 1.2; }

p { margin: 0; }

.vg-limite {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px;
}

#loading {
	display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%;
	background: rgba(0,0,0,0.75) url(../files/images/loading.gif) no-repeat center center; z-index: 10000;
}

/* =========================================================
   TOPO
   ========================================================= */

.vg-topo {
	background: var(--cor-branco);
	border-bottom: 1px solid var(--cor-linha);
}

.vg-topo-conteudo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 84px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.vg-topo-logo { display: block; max-height: 56px; max-width: 60%; width: auto; }

.vg-topo-nome {
	font-size: .875rem;
	font-weight: 500;
	color: var(--cor-texto-suave);
	text-align: right;
}

/* =========================================================
   APRESENTAÇÃO
   ========================================================= */

.vg-intro { padding: 44px 0 32px; }

.vg-intro h1 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); color: var(--cor-texto); }

.vg-intro > p { margin-top: 10px; max-width: 62ch; color: var(--cor-texto-suave); font-size: 1.0625rem; }

.vg-passos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: passo;
}

.vg-passos li {
	position: relative;
	counter-increment: passo;
	padding: 16px 16px 16px 58px;
	border-radius: 12px;
	background: var(--cor-branco);
	border: 1px solid var(--cor-linha);
}

.vg-passos li::before {
	content: counter(passo);
	position: absolute;
	top: 16px;
	left: 16px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cor-destaque);
	color: var(--cor-destaque-txt);
	font-size: .9375rem;
	font-weight: 600;
}

.vg-passos strong { display: block; font-weight: 600; font-size: .9375rem; }

.vg-passos span { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.5; color: var(--cor-texto-suave); }

/* =========================================================
   FORMULÁRIO
   ========================================================= */

.vg-form {
	margin-bottom: 48px;
	padding: 32px 36px 36px;
	border-radius: 16px;
	background: var(--cor-branco);
	border: 1px solid var(--cor-linha);
}

.vg-form-aviso { font-size: .875rem; color: var(--cor-texto-suave); }

.vg-form fieldset { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }

.vg-form fieldset + fieldset { padding-top: 26px; border-top: 1px solid var(--cor-linha); }

.vg-form legend {
	float: left;
	width: 100%;
	margin-bottom: 14px;
	padding: 0;
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--cor-texto);
}

.vg-form legend i { margin-right: 6px; color: var(--cor-destaque); font-size: 1rem; }

.vg-campos {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.vg-campos-coluna { grid-template-columns: minmax(0, 1fr); gap: 24px; }

.vg-campo-inteiro { grid-column: 1 / -1; }

.vg-campo-duplo {
	display: grid;
	grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
	gap: 12px;
}

.vg-campo label,
.vg-rotulo {
	display: block;
	margin-bottom: 6px;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--cor-texto);
}

.vg-campo small {
	display: block;
	margin-top: 6px;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--cor-texto-suave);
}

.vg-campo small.vg-ajuda-topo { margin: -2px 0 8px; }

.vg-obrigatorio { color: #B42318; }

.vg-opcional { font-weight: 400; color: var(--cor-texto-suave); font-size: .875rem; }

.vg-form input[type="text"],
.vg-form input[type="email"],
.vg-form input[type="tel"],
.vg-form select,
.vg-form textarea {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--cor-borda-campo);
	border-radius: 8px;
	background: var(--cor-branco);
	color: var(--cor-texto);
	font-family: var(--fonte-texto);
	font-size: 1rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vg-form textarea { resize: vertical; line-height: 1.5; }

.vg-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6170' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.vg-form input::placeholder,
.vg-form textarea::placeholder { color: #8C94A3; }

.vg-form input:focus,
.vg-form select:focus,
.vg-form textarea:focus {
	outline: none;
	border-color: var(--cor-destaque);
	box-shadow: 0 0 0 3px var(--cor-foco);
}

.vg-form input:disabled,
.vg-form select:disabled,
.vg-form textarea:disabled { background: #F4F6F8; }

/* Tom Select (área e cidade): o tema tom-select.bootstrap5.css usa as variáveis do Bootstrap 5,
   que esta página não carrega. Aqui ficam os mesmos valores do bootstrap5.css da plataforma. */
.vg-form {
	--bs-body-bg:                  #fff;
	--bs-body-color:               #333;
	--bs-border-color:             #dee2e6;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
	--bs-border-radius:            0.25rem;
	--bs-border-width:             1px;
	--bs-box-shadow-inset:         inset 0 1px 2px rgba(0, 0, 0, 0.075);
	--bs-form-invalid-color:       #d9534f;
	--bs-form-valid-color:         #5cb85c;
	--bs-secondary-bg:             #e9ecef;
	--bs-secondary-color:          rgba(51, 51, 51, 0.75);
	--bs-tertiary-bg:              #f8f9fa;
}

/* Tom Select (área e cidade) no mesmo visual dos demais campos */
.vg-form .ts-wrapper .ts-control {
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--cor-borda-campo);
	border-radius: 8px;
	box-shadow: none;
	font-size: 1rem;
	font-family: var(--fonte-texto);
}

.vg-form .ts-wrapper.focus .ts-control {
	border-color: var(--cor-destaque);
	box-shadow: 0 0 0 3px var(--cor-foco);
}

.vg-form .ts-dropdown { font-size: .9375rem; border-radius: 8px; }

.vg-form .ts-dropdown .active { background: var(--cor-suave); color: var(--cor-texto); }

/* Opções em botões (modalidade e visibilidade do nome) */
.vg-opcoes { display: flex; flex-wrap: wrap; gap: 10px; }

.vg-opcao { position: relative; margin: 0; cursor: pointer; }

.vg-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.vg-opcao span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 16px;
	border: 1px solid var(--cor-borda-campo);
	border-radius: 8px;
	background: var(--cor-branco);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--cor-texto);
	transition: border-color .15s ease, background-color .15s ease;
}

.vg-opcao span i { color: var(--cor-texto-suave); }

.vg-opcao:hover span { border-color: var(--cor-destaque); }

.vg-opcao input:checked + span {
	border-color: var(--cor-destaque);
	background: var(--cor-destaque);
	color: var(--cor-destaque-txt);
}

.vg-opcao input:checked + span i { color: var(--cor-destaque-txt); }

.vg-opcao input:focus-visible + span { box-shadow: 0 0 0 3px var(--cor-foco); }

/* Sugestões de autopreenchimento */
.vg-sugestoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.vg-sugestoes > span { font-size: .8125rem; color: var(--cor-texto-suave); margin-right: 2px; }

.vg-sugestoes button {
	padding: 4px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--cor-suave);
	color: var(--cor-texto);
	font-family: var(--fonte-texto);
	font-size: .8125rem;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.vg-sugestoes button:hover { border-color: var(--cor-destaque); }

.vg-sugestoes button:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 1px; }

.vg-sugestoes button.ativo {
	background: var(--cor-destaque);
	color: var(--cor-destaque-txt);
}

.vg-contagem { margin-top: 4px; font-size: .75rem; color: var(--cor-texto-suave); text-align: right; }

/* Botão de envio */
.vg-botao {
	display: block;
	width: 100%;
	min-height: 54px;
	margin-top: 30px;
	padding: 12px 26px;
	border: 0;
	border-radius: 10px;
	background: var(--cor-destaque);
	color: var(--cor-destaque-txt);
	font-family: var(--fonte-texto);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity .15s ease;
}

.vg-botao:hover { opacity: .9; }

.vg-botao:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }

.vg-botao:disabled { opacity: .65; cursor: wait; }

/* =========================================================
   RODAPÉ
   ========================================================= */

.vg-rodape {
	padding: 28px 0 36px;
	border-top: 1px solid var(--cor-linha);
	background: var(--cor-branco);
	text-align: center;
	font-size: .875rem;
	color: var(--cor-texto-suave);
}

.vg-rodape strong { font-weight: 500; }

.vg-rodape-contato { margin-bottom: 14px; }

.vg-rodape-contato span { display: inline-block; margin: 0 8px; white-space: nowrap; }

.vg-rodape-contato i { color: var(--cor-destaque); margin-right: 4px; }

.vg-rodape-linha2 { margin-top: 2px; font-size: .8125rem; }

/* SweetAlert com a cor da entidade (o avisoErro define a cor no próprio botão, por isso o !important) */
.swal2-styled.swal2-confirm {
	background-color: var(--cor-destaque) !important;
	color: var(--cor-destaque-txt) !important;
}

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 767px) {

	.vg-limite { padding: 0 16px; }

	.vg-topo-conteudo { min-height: 68px; }

	.vg-topo-logo { max-height: 44px; max-width: 100%; }

	.vg-topo-nome { display: none; }

	.vg-intro { padding: 28px 0 22px; }

	.vg-passos { grid-template-columns: minmax(0, 1fr); gap: 10px; }

	.vg-form { padding: 22px 16px 26px; border-radius: 14px; margin-bottom: 32px; }

	.vg-campos { grid-template-columns: minmax(0, 1fr); }

	.vg-opcoes { flex-direction: column; }

	.vg-opcao span { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {

	.vg-opcao span,
	.vg-sugestoes button,
	.vg-botao { transition: none; }
}