/* =====================================================================
   TELAS DE ACESSO DA ÁREA DO CANDIDATO (Bootstrap 5.3)
   Login, cadastro, recuperação de senha e telas de status.
   Mesmo padrão visual do estilo_login_entidade.css, nas cores da marca.
   Carregar depois do bootstrap.min.css e do estilo.css.
   ===================================================================== */

:root{
	--csm-border:       #E1E8F0;
	--csm-text-muted:   #5B6B80;
	--csm-danger:       #C53B3B;
	--csm-danger-pale:  #FBEAEA;
	--csm-success:      #1E8E5A;
	--csm-success-pale: #E6F5EC;
	--csm-radius:       14px;
}

.text-cinza {color: #777;}

/* ---------------------------------------------------------------------
   Base / estrutura da página
   --------------------------------------------------------------------- */

html, body{
	height: 100%;
}

body{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--csm-azul-claro);
	color: var(--csm-texto-escuro);
}

@media (max-width: 768px){
	body{
		display: block;
		min-height: auto;
	}
}

/* Wrapper que centraliza vertical/horizontalmente o conteúdo */
.main-wrapper{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

@media (max-width: 768px){
	.main-wrapper{
		padding: 24px 16px 0 16px;
	}
}

/* Pacote que mantém card + rodapé sempre juntos, empilhados */
.login-stack{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Telas de status simples (acesso bloqueado, erro, sucesso...) */
.login-stack.login-stack--sm{
	max-width: 400px;
}

/* Telas com formulário (lembrar senha, nova senha) */
.login-stack.login-stack--md{
	max-width: 420px;
}

/* Cadastro: formulário mais longo */
.login-stack.login-stack--lg{
	max-width: 520px;
}

/* Login: formulário + coluna da marca */
.largura-container{
	max-width: 800px;
	width: 100%;
}

/* ---------------------------------------------------------------------
   Card principal
   --------------------------------------------------------------------- */

.csm-login-card{
	width: 100%;
	background: #fff;
	border-radius: var(--csm-radius);
	border: 1px solid rgba(15, 59, 142, 0.08);
	box-shadow: 0 20px 45px -18px rgba(11, 44, 107, 0.35);
	overflow: hidden;
}

.csm-login-card.csm-login-card--split{
	display: flex;
	align-items: stretch;
	border: none;
}

@media (max-width: 899px){
	.csm-login-card.csm-login-card--split{
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------
   Coluna de dados (formulário ou conteúdo de status)
   --------------------------------------------------------------------- */

.coluna-dados{
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	padding: 30px 36px 34px 36px;
	background-color: #fff;
	background-image:
		radial-gradient(circle at 130% -40%, rgba(15,59,142,0.09) 0%, rgba(15,59,142,0) 38%),
		radial-gradient(circle at -30% 130%, rgba(245,124,0,0.07) 0%, rgba(245,124,0,0) 38%);
}

@media (max-width: 768px){
	.coluna-dados{
		padding: 28px 22px 30px 22px;
	}
}

.coluna-dados.coluna-dados--login{
	padding: 28px 36px;
	background-image: none;
}

@media (max-width: 899px){
	.coluna-dados.coluna-dados--login{
		padding: 28px 22px;
	}
}

/* ---------------------------------------------------------------------
   Cabeçalho (logo + título da tela)
   --------------------------------------------------------------------- */

.csm-login-header{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 20px;
}

.csm-login-logo{
	height: 56px;
	width: auto;
	display: block;
	margin: 0 auto 14px auto;
}

.csm-login-titulo{
	display: block;
	color: var(--csm-azul);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.csm-login-subtitulo{
	font-size: 14px;
	line-height: 1.45;
	color: var(--csm-text-muted);
	margin: 4px 0 0 0;
}

/* ---------------------------------------------------------------------
   Aviso informativo (ex.: "Preencha os dados abaixo para acessar")
   --------------------------------------------------------------------- */

.csm-login-intro{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--csm-azul-escuro);
	background: rgba(15, 59, 142, 0.07);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 18px 0;
	border: 1px solid rgba(15, 59, 142, 0.18);
	border-left: 3px solid var(--csm-azul);
	border-radius: 8px;
	padding: 11px 14px;
	text-align: left;
}

.csm-login-intro i{
	margin-top: 3px;
	color: var(--csm-azul);
}

/* ---------------------------------------------------------------------
   Campos de formulário
   --------------------------------------------------------------------- */

.csm-login-card .form-label{
	color: var(--csm-texto-escuro);
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 6px;
}

.csm-login-card .input-group-text{
	background: var(--csm-azul-claro);
	border-color: var(--csm-border);
	color: var(--csm-azul);
	min-width: 42px;
	justify-content: center;
}

.csm-login-card .form-control{
	border-color: var(--csm-border);
	height: 42px;
}

.csm-login-card .btn-mostrar-senha{
	background-color: #fff;
	border: 1px solid var(--csm-border);
	color: var(--csm-text-muted);
}

/* Mantém o campo branco mesmo quando o navegador preenche automaticamente */
.csm-login-card .form-control:-webkit-autofill,
.csm-login-card .form-control:-webkit-autofill:hover,
.csm-login-card .form-control:-webkit-autofill:focus{
	-webkit-text-fill-color: var(--csm-texto-escuro);
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
	box-shadow: 0 0 0px 1000px #fff inset;
	transition: background-color 9999s ease-in-out 0s;
}

.csm-login-dica{
	color: var(--csm-text-muted);
	font-size: 12.5px;
	margin-top: 6px;
}

.csm-login-card .form-check-label{
	font-size: 13.5px;
	line-height: 1.5;
}

/* Botão principal de ação: todos os botões das telas de acesso têm o mesmo visual */
.csm-login-card .btn-acao{
	display: block;
	width: 100%;
	font-weight: 600;
	font-size: 15px;
	height: 44px;
	margin-top: 14px;
}

.csm-login-card hr{
	border-top: 1px solid var(--csm-border);
	opacity: 1;
	margin: 18px 0 0 0;
}

.csm-login-links{
	margin-top: 16px;
	font-size: 13.5px;
}

.csm-login-links a{
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   Bloco de status (acesso bloqueado, sucesso, erro...)
   --------------------------------------------------------------------- */

.csm-status-block{
	text-align: center;
}

.csm-status-icone{
	font-size: 44px;
	color: var(--csm-danger);
	margin-bottom: 14px;
}

.csm-status-icone.csm-status-icone--success{
	color: var(--csm-success);
}

.csm-status-title{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--csm-danger-pale);
	color: var(--csm-danger);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	margin: 0 0 14px 0;
}

.csm-status-title.csm-status-title--success{
	background: var(--csm-success-pale);
	color: var(--csm-success);
}

.csm-status-desc{
	font-size: 14px;
	color: var(--csm-text-muted);
	line-height: 1.55;
	margin: 0 0 8px 0;
}

/* ---------------------------------------------------------------------
   Coluna da marca (somente na tela de login, em telas largas)
   --------------------------------------------------------------------- */

.coluna-marca{
	flex: 0 0 340px;
	width: 340px;
	padding: 36px 30px;
	color: #fff;
	background:
		radial-gradient(circle at 110% 110%, rgba(245,124,0,0.35) 0%, rgba(245,124,0,0) 45%),
		linear-gradient(160deg, var(--csm-azul) 0%, var(--csm-azul-escuro) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 899px){
	.coluna-marca{ display: none; }
}

.coluna-marca h2{
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 18px 0;
}

.coluna-marca ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.coluna-marca li{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.45;
	margin-bottom: 14px;
}

.coluna-marca li i{
	color: var(--csm-laranja);
	margin-top: 3px;
}

/* ---------------------------------------------------------------------
   Rodapé das telas de acesso
   --------------------------------------------------------------------- */

.rodape{
	text-align: center;
	margin: 18px 0 22px 0;
	font-size: 12.5px;
	color: var(--csm-text-muted);
	line-height: 1.6;
}

.rodape a{
	color: var(--csm-text-muted);
}

/* BOTÃO "ENTRAR COM O GOOGLE" (PADRÃO VISUAL DO GOOGLE: FUNDO BRANCO, BORDA CINZA E O "G" COLORIDO) */
.btn-google{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background-color: #fff;
	border: 1px solid #747775;
	border-radius: 8px;
	color: #1F1F1F;
	font-weight: 500;
	text-decoration: none;
}

.btn-google:hover,
.btn-google:focus{
	background-color: #F8FAFF;
	border-color: #5F6368;
	color: #1F1F1F;
}

/* DIVISOR "OU" ENTRE O GOOGLE E O FORMULÁRIO */
.csm-divisor{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: var(--csm-text-muted);
	font-size: 13px;
}

.csm-divisor::before,
.csm-divisor::after{
	content: '';
	flex: 1;
	border-top: 1px solid #E1E8F0;
}