:root {
	--eo-blue: #26336c;
	--eo-blue-hover: #1d2858;
	--eo-blue-focus: rgba(38, 51, 108, 0.28);
	--eo-blue-soft: rgba(38, 51, 108, 0.9);
	--eo-yellow: #ffed00;
	--eo-yellow-hover: #e6d500;
	--eo-yellow-focus: rgba(255, 237, 0, 0.32);
	--eo-accent-ink: #17203a;
	--eo-gray: #8c8a8b;
	--eo-surface: #f4f4f5;
	--eo-border: #dedddd;
	--eo-white: #ffffff;
}

body:has(.for-login) {
	background: var(--eo-surface);
}

body:has(.for-login) .page-content-wrapper,
body:has(.for-login) main.container,
body:has(.for-login) .page_content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:has(.for-login) .page_content > div {
	width: 100% !important;
	max-width: none !important;
}

body:has(.for-login) .page-header-wrapper,
body:has(.for-login) .page-footer,
body:has(.for-login) .page-breadcrumbs {
	display: none !important;
}

section.for-login {
	display: grid !important;
	grid-template-columns: 50% 50%;
	align-items: center;
	width: 100% !important;
	max-width: none !important;
	min-height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--eo-surface);
}

.for-login::before {
	content: "";
	display: block;
	grid-row: 1 / 3;
	align-self: stretch;
	min-height: 100vh;
	background:
		linear-gradient(rgba(38, 51, 108, 0.2), rgba(38, 51, 108, 0.2)),
		url("/assets/eo_integracion/capa.jpg") center / cover no-repeat,
		linear-gradient(145deg, var(--eo-blue) 0%, var(--eo-blue-soft) 64%, var(--eo-gray) 100%);
}

.for-login .navbar,
.for-login .page-card-head {
	grid-column: 2;
	align-self: end;
}

.for-login .login-content.page-card {
	grid-column: 2;
	align-self: start;
	width: min(100% - 48px, 420px);
	max-width: 420px;
	margin: 0 auto;
	padding: 42px 36px;
	border: 1px solid var(--eo-border);
	border-radius: 12px;
	background: var(--eo-white);
	box-shadow: 0 18px 48px rgba(38, 51, 108, 0.16);
}

.for-login .login-content.page-card form {
	max-width: 100%;
}

.for-login .btn-login {
	background-color: var(--eo-blue) !important;
	border-color: var(--eo-blue) !important;
	color: var(--eo-white) !important;
}

.for-login .btn-login:hover,
.for-login .btn-login:focus {
	background-color: var(--eo-blue-hover) !important;
	border-color: var(--eo-blue-hover) !important;
	color: var(--eo-white) !important;
	box-shadow: 0 0 0 3px var(--eo-blue-focus) !important;
}

.page-card-head img {
	content: url("/assets/eo_integracion/logo.webp");
	display: block;
	width: min(100%, 290px) !important;
	height: auto !important;
	max-height: 165px !important;
	margin: 0 auto 18px;
	object-fit: contain;
}

section.for-login > .page-card-head > img {
	display: block !important;
}

section.for-login > .page-card-head > h4 {
	display: none !important;
}

@media (max-width: 767px) {
	section.for-login {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		padding: 24px 16px;
	}

	.for-login::before {
		width: 100%;
		min-height: 160px;
		border-radius: 16px;
		background:
			linear-gradient(rgba(38, 51, 108, 0.18), rgba(38, 51, 108, 0.18)),
			url("/assets/eo_integracion/capa.jpg") center / cover no-repeat,
			linear-gradient(145deg, var(--eo-blue) 0%, var(--eo-gray) 100%);
	}

	.for-login .login-content.page-card {
		box-sizing: border-box;
		width: min(100%, 360px);
		max-width: calc(100vw - 40px);
		margin-top: 18px;
		padding: 28px 20px;
	}

	.for-login .login-content.page-card form,
	.for-login .login-content.page-card .form-group,
	.for-login .login-content.page-card .form-control,
	.for-login .login-content.page-card input {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	.for-login .login-content.page-card input,
	.for-login .login-content.page-card select,
	.for-login .login-content.page-card textarea {
		font-size: 16px !important;
	}

	.page-card-head img {
		width: min(100%, 240px) !important;
		max-height: 140px !important;
	}
}