/* ==========================================================================
   AFVN — Tela de login
   Duas colunas: marca (preto + dourado) à esquerda, formulário à direita.
   Sem animações de fundo: o foco é entrar no sistema rápido.
   ========================================================================== */

:root {
	--log-gold: #c9a227;
	--log-gold-claro: #e6c95c;
	--log-gold-escuro: #a8861b;
	--log-preto: #0f1115;
	--log-preto-2: #171a20;
	--log-branco: #ffffff;
	--log-fundo: #f4f5f7;
	--log-borda: #e5e7eb;
	--log-borda-forte: #d1d5db;
	--log-texto: #111827;
	--log-texto-2: #374151;
	--log-muted: #6b7280;
	--log-danger: #dc2626;
	--log-danger-bg: #fef2f2;
	--log-success: #16a34a;
	--log-success-bg: #ecfdf3;
	--log-raio: 12px;
	--log-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html, body { height: 100%; }

body.login-afvn {
	margin: 0;
	font-family: var(--log-fonte);
	font-size: 14px;
	color: var(--log-texto);
	background: var(--log-fundo);
	-webkit-font-smoothing: antialiased;
}

.login-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	min-height: 100vh;
}

/* ---------- Coluna da marca ---------- */
.login-marca {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 48px 72px;
	background: var(--log-preto);
	color: #e8eaee;
	text-align: center;
	overflow: hidden;
}

/* brilho dourado discreto atrás do conteúdo, sem animação */
.login-marca::after {
	content: '';
	position: absolute;
	width: 760px;
	height: 760px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -58%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 62%);
	pointer-events: none;
}

.login-marca > * { position: relative; z-index: 1; }

.login-marca-logo {
	width: 100%;
	margin-bottom: 34px;
}

.login-marca-logo img {
	width: 300px;
	max-width: 68%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.login-marca-texto { max-width: 460px; }

.login-marca-texto h1 {
	margin: 0 0 14px;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -.02em;
	color: #fff;
}

.login-marca-texto h1 span { color: var(--log-gold); }

.login-marca-texto p {
	margin: 0 auto 30px;
	max-width: 400px;
	font-size: 15px;
	line-height: 1.6;
	color: #a3a9b5;
}

/* um traço dourado curto separa a chamada da lista */
.login-marca-texto p::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	margin: 26px auto 0;
	border-radius: 2px;
	background: rgba(201, 162, 39, .55);
}

.login-recursos {
	display: inline-grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.login-recursos li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #c9cdd5;
}

.login-recursos i {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(201, 162, 39, .14);
	color: var(--log-gold-claro);
	font-size: 12px;
}

.login-rodape-marca {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	font-size: 12.5px;
	color: #6f7683;
}

/* ---------- Coluna do formulário ---------- */
.login-painel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: var(--log-branco);
}

.login-form-caixa {
	width: 100%;
	max-width: 380px;
}

.login-logo-mobile {
	display: none;
	margin: 0 auto 28px;
	width: 180px;
}

.login-form-caixa h2 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--log-texto);
}

.login-form-caixa .login-sub {
	margin: 0 0 28px;
	font-size: 14px;
	color: var(--log-muted);
}

/* ---------- Avisos ---------- */
.login-aviso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
	padding: 12px 14px;
	border-radius: var(--log-raio);
	border: 1px solid;
	font-size: 13.5px;
	line-height: 1.45;
}

.login-aviso i { margin-top: 1px; font-size: 14px; }

.login-aviso.erro {
	background: var(--log-danger-bg);
	border-color: rgba(220, 38, 38, .25);
	color: #991b1b;
}

.login-aviso.ok {
	background: var(--log-success-bg);
	border-color: rgba(22, 163, 74, .25);
	color: #14532d;
}

/* ---------- Campos ---------- */
.login-campo { margin-bottom: 16px; }

.login-campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--log-texto-2);
}

.login-entrada {
	position: relative;
	display: flex;
	align-items: center;
}

.login-entrada > i {
	position: absolute;
	left: 13px;
	font-size: 14px;
	color: var(--log-muted);
	pointer-events: none;
}

.login-entrada input {
	width: 100%;
	height: 46px;
	padding: 0 14px 0 38px;
	font-family: var(--log-fonte);
	font-size: 14.5px;
	color: var(--log-texto);
	background: var(--log-branco);
	border: 1px solid var(--log-borda-forte);
	border-radius: var(--log-raio);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.login-entrada input::placeholder { color: #9ca3af; }

.login-entrada input:hover { border-color: #b9bec7; }

.login-entrada input:focus {
	border-color: var(--log-gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .16);
}

.login-entrada.com-botao input { padding-right: 42px; }

.login-ver-senha {
	position: absolute;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--log-muted);
	font-size: 14px;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}

.login-ver-senha:hover { background: var(--log-fundo); color: var(--log-texto-2); }

/* ---------- Opções ---------- */
.login-opcoes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 22px;
}

.login-lembrar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--log-texto-2);
	cursor: pointer;
	user-select: none;
}

.login-lembrar input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--log-gold);
	cursor: pointer;
}

.login-link {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--log-gold-escuro);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--log-fonte);
}

.login-link:hover { text-decoration: underline; }

/* ---------- Botão ---------- */
.login-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: var(--log-raio);
	background: var(--log-gold);
	color: #1a1405;
	font-family: var(--log-fonte);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}

.login-botao:hover { background: var(--log-gold-escuro); color: #fff; }
.login-botao:active { transform: translateY(1px); }
.login-botao[disabled] { opacity: .75; cursor: default; }

.login-rodape {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--log-borda);
	font-size: 12.5px;
	color: var(--log-muted);
	text-align: center;
}

/* ---------- Modal de recuperação ---------- */
.login-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.login-modal.aberto { display: flex; }

.login-modal-fundo {
	position: absolute;
	inset: 0;
	background: rgba(15, 17, 21, .55);
}

.login-modal-caixa {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--log-branco);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(16, 24, 40, .25);
	overflow: hidden;
}

.login-modal-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--log-borda);
}

.login-modal-topo h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--log-texto);
}

.login-modal-fechar {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--log-muted);
	font-size: 15px;
	cursor: pointer;
}

.login-modal-fechar:hover { background: var(--log-fundo); color: var(--log-texto); }

.login-modal-corpo { padding: 20px; }

.login-modal-corpo p {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--log-muted);
}

.login-modal-pe {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--log-borda);
	background: #fafbfc;
}

.login-btn-secundario {
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--log-borda-forte);
	border-radius: 10px;
	background: var(--log-branco);
	color: var(--log-texto-2);
	font-family: var(--log-fonte);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
}

.login-btn-secundario:hover { background: var(--log-fundo); }

.login-btn-principal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--log-gold);
	color: #1a1405;
	font-family: var(--log-fonte);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.login-btn-principal:hover { background: var(--log-gold-escuro); color: #fff; }

.login-mensagem { margin-top: 12px; font-size: 13px; }
.login-mensagem .erro { color: var(--log-danger); }
.login-mensagem .ok { color: var(--log-success); }
.login-mensagem .carregando { color: var(--log-muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px) {
	.login-layout { grid-template-columns: minmax(0, 1fr); }
	.login-marca { display: none; }
	.login-painel { min-height: 100vh; background: var(--log-fundo); }
	.login-logo-mobile { display: block; }

	.login-form-caixa {
		max-width: 400px;
		padding: 28px 22px 24px;
		background: var(--log-branco);
		border: 1px solid var(--log-borda);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
	}
}

@media (max-width: 400px) {
	.login-painel { padding: 24px 14px; }
	.login-form-caixa { padding: 22px 16px 20px; }
}

/* fundo escuro no mobile para o logo (ele tem elipse preta) */
@media (max-width: 991.98px) {
	.login-logo-mobile {
		background: var(--log-preto);
		border-radius: 14px;
		padding: 12px 16px;
		width: 200px;
	}
}