/*
 * Telas de acesso no layout novo (ui-v2): entrar, esqueceu a senha, código de autenticação e
 * bloqueio financeiro. Carregado só com `html.ui-v2-acesso` (ver index.php e includes/head.php),
 * sem a moldura do admin. O markup do Metronic (kt-login--v3) e os ids usados pelo
 * login-form.js não mudam; o painel de marca vem de includes/layout-v2/acesso-marca.php.
 */

/* ---------- Estrutura: painel de marca + área do formulário ---------- */
html.ui-v2-acesso body #kt_login.kt-login {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.9fr);
	min-height: 100vh;
	min-height: 100dvh;
	background: transparent;
}

html.ui-v2-acesso body #kt_login.kt-login > .kt-grid__item--fluid {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	background: transparent !important;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper {
	flex: 0 0 auto !important; /* o grid do Metronic usa seletores com vários :not() */
	width: 100%;
	margin: 0;
	padding: 32px 24px;
	overflow: visible;
}

/* ---------- Painel de marca ---------- */
html.ui-v2-acesso body .ui-v2-acesso__marca {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	margin: 16px 0 16px 16px;
	padding: 44px 48px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--ui-hero, linear-gradient(135deg, #0b3b3e 0%, #1f8f8a 54%, #36a9a1 100%));
	color: #ffffff;
	isolation: isolate;
}

/* Brilho de vidro no canto, só decorativo. */
html.ui-v2-acesso body .ui-v2-acesso__marca::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -160px;
	z-index: -1;
	width: 460px;
	height: 460px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}

html.ui-v2-acesso body .ui-v2-acesso__chamada {
	margin-block: auto;
	display: grid;
	gap: 14px;
	max-width: 30rem;
}

html.ui-v2-acesso body .ui-v2-acesso__rotulo {
	font: 500 12px/1 var(--ui-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

html.ui-v2-acesso body .ui-v2-acesso__titulo {
	margin: 0;
	font-size: clamp(30px, 3.2vw, 44px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

html.ui-v2-acesso body .ui-v2-acesso__texto {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}

html.ui-v2-acesso body .ui-v2-acesso__temas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html.ui-v2-acesso body .ui-v2-acesso__temas li {
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--ui-radius-pill);
	background: rgba(255, 255, 255, 0.1);
	font-size: 13px;
	font-weight: 500;
}

/* ---------- Cartão do formulário ---------- */
html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 36px 32px 32px;
	border: 1px solid var(--ui-glass-edge, var(--ui-line));
	border-radius: 22px;
	background: var(--ui-glass, var(--ui-surface));
	box-shadow: var(--ui-shadow);
	-webkit-backdrop-filter: var(--ui-glass-blur);
	backdrop-filter: var(--ui-glass-blur);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__logo {
	margin: 0 0 28px;
	text-align: left;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__logo img {
	max-width: 132px;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__head {
	margin: 0 0 20px;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__title {
	margin: 0;
	text-align: left;
	font-size: var(--ui-title-md);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ui-text);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__desc {
	margin-top: 8px;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ui-text-muted);
}

/* ---------- Campos ---------- */
html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .input-group + .input-group {
	margin-top: 12px;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control {
	height: 48px;
	margin-top: 0;
	padding: 0 16px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-md) !important;
	background: var(--ui-surface-solid);
	font-family: var(--ui-font);
	font-size: 15px;
	color: var(--ui-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control::placeholder {
	color: var(--ui-text-faint);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control:focus {
	border-color: var(--ui-brand);
	box-shadow: var(--ui-focus);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control.is-invalid {
	border-color: var(--ui-bad);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control.is-invalid + .invalid-feedback,
html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .invalid-feedback {
	padding-left: 2px;
	font-size: 12.5px;
	color: var(--ui-bad);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .kt-login__extra {
	margin: 12px 0 0;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .kt-login__extra .kt-login__link {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ui-accent);
}

/* ---------- Ações: botões lado a lado, o   entre eles não ocupa espaço ---------- */
html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .kt-login__actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	font-size: 0;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .kt-login__actions .btn:not(.d-none) {
	flex: 1 1 0;
	height: 48px;
	padding: 0 20px;
	border-radius: var(--ui-radius-md);
	font-family: var(--ui-font);
	font-size: 15px;
	font-weight: 600;
	box-shadow: none !important;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .kt-login__actions .btn:focus-visible {
	box-shadow: var(--ui-focus) !important;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-login__actions .kt-login__btn-primary {
	border-color: var(--ui-brand);
	background: var(--ui-brand);
	color: var(--ui-brand-ink);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-login__actions .kt-login__btn-primary:hover {
	border-color: var(--ui-accent);
	background: var(--ui-accent);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-login__actions .kt-login__btn-secondary {
	border: 1px solid var(--ui-line);
	background: transparent;
	color: var(--ui-text);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-login__actions .kt-login__btn-secondary:hover {
	background: var(--ui-surface-hover);
}

/* ---------- Mensagens do login-form.js ---------- */
html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-form .alert {
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 0;
	border-radius: var(--ui-radius-md);
	font-size: 13.5px;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-form .alert.alert-danger {
	background: var(--ui-bad-soft);
	color: var(--ui-bad);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-form .alert.alert-success {
	background: var(--ui-ok-soft);
	color: var(--ui-ok);
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__container .kt-form .alert .alert-text {
	color: inherit;
}

/* ---------- Bloqueio financeiro: mesma base, o vermelho segue sinalizando o bloqueio ---------- */
html.ui-v2-acesso body .financial-lock-page {
	background: var(--ui-bg);
	background-image: var(--ui-bg-image);
	font-family: var(--ui-font);
}

html.ui-v2-acesso body .financial-lock-card {
	border-color: var(--ui-line);
	border-radius: 24px;
	background: var(--ui-surface-solid);
	box-shadow: var(--ui-shadow);
	color: var(--ui-text);
}

html.ui-v2-acesso body .financial-lock-card h1 {
	letter-spacing: -0.02em;
	color: var(--ui-text);
}

html.ui-v2-acesso body .financial-lock-card p {
	color: var(--ui-text-muted);
}

html.ui-v2-acesso body .financial-lock-actions .btn {
	border-radius: var(--ui-radius-md);
	font-family: var(--ui-font);
}

/* ---------- reCAPTCHA: o selo flutuante cobria o botão. O aviso em texto o substitui. O
   Google injeta o selo numa div vazia dentro das ações, que não pode contar no gap. ---------- */
html.ui-v2-acesso .grecaptcha-badge {
	visibility: hidden;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .kt-login__actions > div {
	display: contents;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .ui-v2-recaptcha-aviso {
	margin: 14px 0 0;
	color: var(--ui-text-muted);
	font-family: var(--ui-font);
	font-size: var(--ui-text-xs);
	line-height: 1.45;
	text-align: center;
}

html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .ui-v2-recaptcha-aviso a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Tablet e celular: marca vira faixa compacta acima do formulário ---------- */
@media (max-width: 991.98px) {
	html.ui-v2-acesso body #kt_login.kt-login {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-content: start;
	}

	html.ui-v2-acesso body .ui-v2-acesso__marca {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		margin: 12px 12px 0;
		padding: 18px 20px;
		border-radius: 18px;
	}

	html.ui-v2-acesso body .ui-v2-acesso__marca::after {
		display: none;
	}

	html.ui-v2-acesso body .ui-v2-acesso__chamada {
		gap: 4px;
	}

	html.ui-v2-acesso body .ui-v2-acesso__titulo {
		font-size: 17px;
		line-height: 1.25;
		letter-spacing: -0.01em;
	}

	html.ui-v2-acesso body .ui-v2-acesso__rotulo {
		font-size: 10.5px;
	}

	html.ui-v2-acesso body .ui-v2-acesso__texto,
	html.ui-v2-acesso body .ui-v2-acesso__temas {
		display: none;
	}

	html.ui-v2-acesso body #kt_login.kt-login > .kt-grid__item--fluid {
		align-items: flex-start;
	}

	html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper {
		padding: 20px 12px 32px;
	}
}

@media (max-width: 575.98px) {
	html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container {
		padding: 28px 20px 24px;
		border-radius: 18px;
	}

	html.ui-v2-acesso body .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__title {
		font-size: 21px;
	}
}