/* =========================================================================
   Zilor Talentos — estilos do Banco de Talentos e do pop-up de confirmação.
   Vem DEPOIS de talentos.css (depende dele) e usa os mesmos tokens (--zt-*).
   Verde = ação principal; lima = detalhe; marrom (--zt-marrom) só como apoio.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Introdução do formulário do Banco de Talentos
   --------------------------------------------------------------------------- */
.zt .zt-banco-intro {
	margin: 0 0 18px;
	padding: 0 0 0 14px;
	border-left: 4px solid var(--zt-lima);
}

.zt .zt-banco-intro__titulo {
	margin: 0 0 6px;
	padding: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--zt-verde-900);
}

.zt .zt-banco-intro__texto {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.45;
	color: var(--zt-tinta);
}

/* ---------------------------------------------------------------------------
   2. Funções agrupadas por área
   --------------------------------------------------------------------------- */
.zt .zt-chips-grupo {
	margin: 0 0 8px;
}

.zt .zt-chips-grupo__titulo {
	display: block;
	margin: 14px 0 10px;
	padding: 2px 0 2px 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--zt-verde-800);
	border-left: 4px solid var(--zt-lima);
}

.zt .zt-chips-grupo:first-of-type .zt-chips-grupo__titulo {
	margin-top: 8px;
}

/* Administrativo e especializado: marrom de apoio (#654D35 sobre branco: contraste acima de 7:1) */
.zt .zt-chips-grupo--administrativo .zt-chips-grupo__titulo {
	color: var(--zt-marrom);
	border-left-color: var(--zt-marrom);
}

/* "Outras": discreto */
.zt .zt-chips-grupo--outras .zt-chips-grupo__titulo {
	color: var(--zt-tinta-2);
	border-left-color: var(--zt-linha);
}

/* ---------------------------------------------------------------------------
   3. Pop-up de confirmação (o JS põe a classe zt-ok--popup no bloco que já existe)
   Sem JavaScript nada disto vale: a confirmação fica como bloco na página.
   --------------------------------------------------------------------------- */
html.zt-modal-aberto,
html.zt-modal-aberto body {
	overflow: hidden;
}

.zt-modal-fundo {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99998;
	background: rgba(14, 59, 38, 0.72);
}

.zt.zt-ok.zt-ok--popup {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99999;
	box-sizing: border-box;
	width: 92%;
	max-width: 520px;
	max-height: 92%;
	margin: 0;
	padding: 28px 20px 22px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0 24px 60px rgba(14, 59, 38, 0.35);
}

/* O título recebe foco por programa (leitor de tela lê); não precisa de contorno */
.zt .zt-ok__titulo:focus {
	outline: none;
}

.zt.zt-ok--popup .zt-ok__icone {
	width: 72px;
	height: 72px;
}

.zt.zt-ok--popup .zt-ok__texto {
	margin-bottom: 22px;
}

.zt.zt-ok--popup .zt-ok__fechar {
	margin: 0 0 14px;
}

.zt.zt-ok--popup .zt-link {
	display: inline-block;
	min-height: 48px;
	padding: 12px 8px;
	font-size: 17px;
}

@media (min-width: 600px) {
	.zt.zt-ok.zt-ok--popup {
		padding: 36px 32px 28px;
	}
}