:root{
	--ace-blue:         #1775B9;
	--ace-blue-dark:    #125D93;
	--ace-blue-pale:    #EAF3FB;
	--ace-navy:         #1F2044;
	--ace-border:       #E1E8F0;
	--ace-text-muted:   #64748B;
	--ace-danger:       #D64545;
	--ace-danger-pale:  #FBEAEA;
	--ace-success:      #1E8E5A;
	--ace-success-pale: #E6F5EC;
	--ace-radius:       14px;
}

/* --- Tipografia base --- */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 400;}

b, strong {
    font-weight: 500;
}

label {font-weight: 500; color: #445244; }

.small { font-size: 90%; }

/* --- Utilitarios --- */

.nopadding { padding: 0 }

.text-cinza {color: #777;}

.rodape {text-align: center; margin: 15px 0 20px 0; }

.swal2-popup { font-size: 1rem !important; }

/* --- Mascara de carregamento (div id="loading") --- */

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

/* --- Compatibilidade com o Bootstrap 3 ---
   Colunas fora de uma .row: no BS3 elas flutuavam lado a lado (e seguravam a margem dos elementos
   de dentro); no BS5 só funcionam dentro da .row. Com :where, a regra não tem peso e o .nopadding
   e as demais regras da página continuam valendo. */
:where(:not(.row) > [class^="col-"], :not(.row) > [class*=" col-"]):not(td):not(th) { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
:where(:not(.row) > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12)):not(td):not(th) { float: left; }
@media (min-width: 768px) { :where(:not(.row) > [class*="col-md-"]):not(td):not(th) { float: left; } }
@media (min-width: 992px) { :where(:not(.row) > [class*="col-lg-"]):not(td):not(th) { float: left; } }
@media (min-width: 1200px) { :where(:not(.row) > [class*="col-xl-"]):not(td):not(th) { float: left; } }

/* .input-group usado só como invólucro de uma caixa de marcar com o texto ao lado (ex.: "Concordo com os
   Termos de Uso"): no BS3 o texto corria em linha; no BS5 o .input-group é flex e quebraria o texto em blocos */
.input-group:has(> input[type=checkbox], > input[type=radio]) { display: block; }

/* medidas do BS3 que o BS5 mudou: margem de baixo dos alertas e posição da caixa de marcar */
.alert { margin-bottom: 20px; }
input[type=checkbox], input[type=radio] { margin: 4px 0 0; line-height: normal; }

/* cor do texto digitado e do texto de exemplo (placeholder) dos campos no BS3 (o BS5 deixa os dois mais escuros) */
.form-control, .form-control:focus, .form-select, .form-select:focus { color: #555; }
.form-control::placeholder { color: #999; }

/* =====================================================================
   FIM DA BASE HERDADA DO estilo.css
   ===================================================================== */
/* ---------------------------------------------------------------------
   Base / estrutura da página
   --------------------------------------------------------------------- */

html, body{
	height: 100%;
}

body{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--ace-blue-pale);
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	color: var(--ace-navy);
}

@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: 28px 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, manutenção, erro, sucesso...) */
.login-stack.login-stack--sm{
	max-width: 392px;
}

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

.login-stack .rodape{
	margin-top: 18px;
	text-align: center;
}

/* Usado apenas na tela de login (card com coluna de imagem):
   392px do formulário + 350px da imagem */
.largura-container{
	max-width: 742px;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ---------------------------------------------------------------------
   Card principal (substitui o antigo .panel .panel-primary)
   --------------------------------------------------------------------- */

.ace-login-card{
	width: 100%;
	background: #fff;
	border-radius: var(--ace-radius);
	border: 1px solid rgba(31, 32, 68, 0.06);
	box-shadow: 0 20px 45px -18px rgba(31, 32, 68, 0.35);
	overflow: hidden;
}

/* Variante usada apenas na tela de login: card em duas colunas
   (formulário + imagem da entidade) */
.ace-login-card.ace-login-card--split{
	display: flex;
	align-items: stretch;
	border: none;
}

@media (max-width: 999px){
	.ace-login-card.ace-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;
	box-sizing: border-box;
	background-color: #fff;
	background-image:
		radial-gradient(circle at 130% -40%, rgba(23,117,185,0.10) 0%, rgba(23,117,185,0) 38%),
		radial-gradient(circle at -30% 130%, rgba(23,117,185,0.07) 0%, rgba(23,117,185,0) 38%);
}

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

/* Variante da tela de login: formulário mais compacto, sem o degradê
   (a coluna direita com a imagem já dá o toque visual) */
.coluna-dados.coluna-dados--login{
	padding: 28px 36px;
	background-image: none;
}

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

/* Variante da tela de lembrar senha: um pouco mais de respiro no rodapé
   para o link "Fazer login" não ficar colado na borda do card */
.coluna-dados.coluna-dados--lembrar{
	padding-bottom: 46px;
}

@media (max-width: 768px){
	.coluna-dados.coluna-dados--lembrar{
		padding-bottom: 34px;
	}
}

/* ---------------------------------------------------------------------
   Cabeçalho (logo + nome do painel + nome da entidade)

   No HTML a ordem é logo, nome da entidade (h1) e nome do painel
   (span). A propriedade "order" apenas inverte a exibição dos dois
   últimos — o nome do painel aparece primeiro, em destaque, e o nome
   da entidade logo abaixo, menor — sem precisar alterar as páginas.
   --------------------------------------------------------------------- */

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

.ace-login-logo{
	order: 1;
	max-height: 200px;
	width: auto;
	display: block;
	margin: 0 auto 14px auto;
}

.ace-login-painel-badge{
	order: 2;
	display: block;
	color: var(--ace-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.ace-login-entidade{
	order: 3;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--ace-text-muted);
	margin: 4px 0 0 0;
}

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

.ace-login-intro{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--ace-blue-dark);
	background: rgba(23, 117, 185, 0.10);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 18px 0;
	border: 1px solid rgba(23, 117, 185, 0.22);
	border-left: 3px solid var(--ace-blue);
	border-radius: 8px;
	padding: 11px 14px;
	text-align: left;
}

.ace-login-intro i{
	margin-top: 2px;
	color: var(--ace-blue);
}

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

.form-group label.small{
	color: var(--ace-navy);
	font-weight: 600;
	margin-bottom: 6px;
}

.ace-login-card .form-group{
	margin-bottom: 12px;
}

.ace-login-card .form-group.mt-3{
	margin-top: 12px;
}

.ace-login-card .input-group-text{
	background: var(--ace-blue-pale);
	border: 1px solid var(--ace-border);
	border-right: none;
	color: var(--ace-blue-dark);
}

.ace-login-card .form-control,
.ace-login-card .form-select{
	border: 1px solid var(--ace-border);
	box-shadow: none;
	height: 40px;
}

.ace-login-card .form-control:focus,
.ace-login-card .form-select:focus{
	border-color: var(--ace-blue);
	box-shadow: 0 0 0 3px rgba(23, 117, 185, 0.15);
}

#show-password,
#show-password2{
	background-color: #fff;
	border: 1px solid var(--ace-border);
	border-left: none;
	cursor: pointer;
}

/* Evita que o autofill do navegador (fundo amarelado) conflite com o
   cartão de aviso acima: mantém o campo branco mesmo autopreenchido. */
.ace-login-card .form-control:-webkit-autofill,
.ace-login-card .form-select:-webkit-autofill,
.ace-login-card .form-control:-webkit-autofill:hover,
.ace-login-card .form-select:-webkit-autofill:hover,
.ace-login-card .form-control:-webkit-autofill:focus,
.ace-login-card .form-select:-webkit-autofill:focus{
	-webkit-text-fill-color: var(--ace-navy);
	-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;
}

.ace-login-dica{
	color: var(--ace-text-muted);
	font-size: 12.5px;
	font-style: normal;
	margin-top: 6px;
	text-align: left;
}

/* ---------------------------------------------------------------------
   Botão principal de ação. Todos os botões/links de ação (login,
   recuperar senha, "tente novamente", "fazer login" etc.) usam as
   mesmas classes do Bootstrap que o botão de login já usava:
   btn btn-primary btn-block — assim têm sempre o mesmo visual.

   Escopamos com .ace-login-card na frente para que a especificidade
   (duas classes) sempre vença a regra genérica ".ace-login-card a"
   abaixo — sem isso, o texto do link ficaria escuro em vez de branco.
   --------------------------------------------------------------------- */

.ace-login-card .btn-primary{
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--ace-blue);
	border: 1px solid var(--ace-blue);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	height: 42px;
	line-height: 40px;
	padding: 0 16px;
	border-radius: 6px;
	margin-top: 12px;
	transition: background-color .15s ease, border-color .15s ease;
}

.ace-login-card .btn-primary:hover,
.ace-login-card .btn-primary:focus{
	background: var(--ace-blue-dark);
	border-color: var(--ace-blue-dark);
	color: #fff;
	text-decoration: none;
}

.ace-login-card hr{
	border-top: 1px solid var(--ace-border);
	margin-top: 16px;
	margin-bottom: 0;
}

.ace-login-card .col-lg-12.nopadding{
	margin-top: 0;
}

.ace-login-card a{
	color: var(--ace-blue-dark);
}

.ace-login-card .col-lg-12.mt-3.text-start.nopadding.small{
	margin-top: 16px !important;
	margin-bottom: 20px !important;
}

/* ---------------------------------------------------------------------
   Bloco de status (acesso bloqueado, sucesso, erro, manutenção...)
   --------------------------------------------------------------------- */

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

.ace-status-block > img{
	margin-bottom: 18px;
}

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

/* Variante verde para mensagens de sucesso (e-mail enviado, senha
   atualizada) */
.ace-status-title.ace-status-title--success{
	background: var(--ace-success-pale);
	color: var(--ace-success);
}

.ace-status-desc{
	font-size: 13.5px;
	color: var(--ace-text-muted);
	line-height: 1.55;
	margin: 0 0 24px 0;
}

/* Quando não há botão de ação depois (ex.: conta desativada, você foi
   desconectado), remove a margem inferior extra */
.ace-status-desc.ace-status-desc--last{
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Coluna direita da tela de login: imagem da entidade
   (proporção base 370x562, adaptável)
   --------------------------------------------------------------------- */

.coluna-imagem-entidade{
	position: relative;
	flex: 0 0 350px;
	width: 350px;
	align-self: stretch;
	overflow: hidden;
	background: linear-gradient(160deg, var(--ace-blue) 0%, var(--ace-navy) 100%);
}

@media (max-width: 999px){
	.coluna-imagem-entidade{ display: none; }
}

.loader-imagem{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	z-index: 2;
}

.spinner{
	width: 40px;
	height: 40px;
	border: 4px solid rgba(255,255,255,0.35);
	border-top: 4px solid #fff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin{
	to { transform: rotate(360deg); }
}

.img-entidade{
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ace-login-legenda{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 22px;
	background: linear-gradient(0deg, rgba(10,13,28,0.62) 0%, rgba(10,13,28,0.62) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .03em;
	z-index: 3;
	pointer-events: none;
}

.ace-login-legenda i{
	color: #fff;
	font-size: 15px;
}

/* ---------------------------------------------------------------------
   Ajustes para telas com pouca altura
   --------------------------------------------------------------------- */

@media (max-height: 800px) and (min-width: 1000px){

	.main-wrapper{
		padding: 16px 20px;
	}

	.coluna-dados.coluna-dados--login{
		padding: 20px 32px;
	}

	.ace-login-logo{
		max-height: 120px;
		margin-bottom: 8px;
	}

	.ace-login-header{
		margin-bottom: 12px;
	}

	.ace-login-painel-badge{
		font-size: 18px;
	}

	.ace-login-entidade{
		margin-top: 2px;
	}

	.ace-login-intro{
		padding: 8px 12px;
		margin-bottom: 10px;
	}

	.ace-login-card .form-group.mt-3{
		margin-top: 8px !important;
		margin-bottom: 8px;
	}

	.ace-login-card .form-control,
	.ace-login-card .form-select{
		height: 36px;
	}

	.ace-login-card .btn-primary{
		height: 38px;
		line-height: 36px;
		margin-top: 8px !important;
	}

	.ace-login-card hr.mt-4{
		margin-top: 12px !important;
	}

	.ace-login-card .col-lg-12.mt-3.text-start.nopadding.small{
		margin-top: 10px !important;
		margin-bottom: 8px !important;
	}

	.login-stack .rodape{
		margin-top: 10px;
	}

}