/* Definição das cores personalizadas para SIAP */
:root {
	--siap-blue: #6B9BD5; /* Azul principal - mesma cor do sistema */
	--siap-light-blue: #e6f0f7; /* Azul claro para fundo de destaque */
	--siap-gray-bg: #f0f2f5; /* Cinza claro para o card e footer */
}

/* ---------------------------------------------------- */
/* 1. LAYOUT PRINCIPAL E BACKGROUND */
/* ---------------------------------------------------- */
.login-bg-container {
	/* Simulação do fundo com os ícones vazados em azul */
	background-color: #e6f0f7;
	/* Aqui, você usaria uma imagem de fundo (background-image) com o padrão dos ícones */
}

.login-card {
	width: 640px; /* Reduzido para um card mais estreito */
	max-width: 85%; /* Responsividade garantida em telas pequenas */
	background-color: white !important;
}

/* ---------------------------------------------------- */
/* 2. ELEMENTOS INTERNOS DO CARD */
/* ---------------------------------------------------- */

/* Cabeçalho interno */
.login-inner-header {
	background-color: var(--siap-blue) !important;
}

/* Corpo interno (logos e formulário) */
.login-inner-body {
	background-color: white !important;
}

/* Rodapé interno */
.login-inner-footer {
	background-color: var(--siap-gray-bg); /* Cor de fundo cinza claro */
	border: 1px solid #d6d6d6;
}


/* Estilo para o título do formulário */
.text-primary-siap {
	color: var(--siap-blue) !important;
}

/* ---------------------------------------------------- */
/* 4. VERIFICAÇÃO (CAPTCHA) E BOTÃO */
/* ---------------------------------------------------- */
.credentials-box {
	background-color: var(--siap-gray-bg);
}

.captcha-box {
	background-color: var(--siap-gray-bg);
}

.captcha-texto {
	background-color: var(--siap-light-blue);
	color: var(--siap-blue);
	border: 1px solid #b3d4f0; /* Adiciona uma borda sólida e sutil */
}

/* Estilo para os ícones do Bootstrap Icons */

/* Ajustes compactos para campos, botão e CAPTCHA */
.captcha-texto {
	font-size: 0.95rem;
}

.captcha-icon i {
	font-size: 22px; /* reduzido para visual mais compacto */
	line-height: 1;
	color: var(--siap-blue);
}

.captcha-icon {
	cursor: pointer;
	opacity: 0.6;
	padding: 4px;
	border: 2px solid transparent;
	border-radius: 5px;
	transition: all 0.2s;
}

.captcha-icon:hover {
	opacity: 1;
}

.captcha-icon.selected {
	opacity: 1;
	border-color: var(--siap-blue); /* Borda azul no ícone selecionado */
}

.btn-primary-siap {
	background-color: var(--siap-blue) !important;
	border-color: var(--siap-blue) !important;
	padding: 0.5rem 0.75rem; /* menor altura do botão */
	font-size: 0.95rem;
}

/* Campos de credenciais mais compactos */
.credentials-box .form-control {
	padding: 0.375rem 0.5rem;
	font-size: 0.95rem;
}

.link-senha-siap {
	color: var(--siap-blue) !important;
}

/* Estilo para a logo no rodapé */
.footer-logo {
	height: 1.3em; /* Define a altura da logo para ser um pouco maior que a fonte */
	width: auto; /* Mantém a proporção */
	vertical-align: text-bottom; /* Alinha a logo com a base do texto */
}

/* Logo no cabeçalho do formulário (login) */
.login-header-logo {
	max-width: 220px;
	height: auto;
	display: inline-block;
}

@media (max-width: 576px) {
    .login-header-logo {
        max-width: 160px;
    }
}

/* Título do formulário de login (menor que o padrão fs-4) */
.login-form-title {
	font-size: 0.75rem; /* ~12px - reduzido */
	font-weight: 500;
	margin-bottom: 0.5rem;
}

@media (max-width: 576px) {
	.login-form-title {
		font-size: 0.7rem; /* ajusta em telas pequenas */
	}
}