/* Flexiu AI — acceso unificado para clientes, expertos y equipos.
   Estilo de producto: sobrio, claro, con acento violeta y menta. */

html.flexiu-login-page,
html.flexiu-login-page body,
body[data-path="login"] {
	min-height: 100%;
	background: #f7f8fc;
	color: #0f172a;
}

html.flexiu-login-page body,
body[data-path="login"] {
	font-family: "Manrope Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* First paint: si el JS aún no cargó, el formulario ya tiene una marca limpia. */
html:not(.flexiu-login-page) body[data-path="login"] .for-login .page-card-head-text::before {
	content: "Flexiu AI";
	display: block;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #5b3df5;
}

:is(html.flexiu-login-page, body[data-path="login"]) .navbar,
:is(html.flexiu-login-page, body[data-path="login"]) .web-footer,
:is(html.flexiu-login-page, body[data-path="login"]) .page-breadcrumbs,
:is(html.flexiu-login-page, body[data-path="login"]) .page-header-wrapper {
	display: none !important;
}

:is(html.flexiu-login-page, body[data-path="login"]) .page-content-wrapper {
	min-height: 100svh !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: minmax(420px, 45%) minmax(0, 55%);
}

/* ------------------------------------------------------------------ aside */
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside {
	position: relative;
	display: flex;
	min-height: 100svh;
	padding: clamp(34px, 4vw, 58px);
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background:
		radial-gradient(600px 420px at 8% 8%, rgba(91, 61, 245, .32), transparent 65%),
		radial-gradient(520px 380px at 92% 88%, rgba(37, 211, 164, .12), transparent 70%),
		#0a1120;
	color: #fff;
}

:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%);
	pointer-events: none;
}

:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside > * {
	position: relative;
	z-index: 1;
}

:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside-brand img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-hero {
	max-width: 470px;
	margin: auto 0;
	padding: 56px 0 42px;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-hero .eyebrow {
	display: block;
	margin-bottom: 16px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #a99bff;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-hero h2 {
	margin: 0 0 14px;
	font-size: clamp(32px, 3.1vw, 46px);
	line-height: 1.06;
	font-weight: 780;
	letter-spacing: -.045em;
	color: #fff;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-hero p {
	margin: 0;
	max-width: 390px;
	font-size: 15px;
	line-height: 1.65;
	color: #aebbd2;
}

:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-points {
	display: grid;
	gap: 0;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,.11);
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-points li {
	display: grid;
	gap: 3px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255,255,255,.09);
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-points b {
	font-size: 13px;
	font-weight: 750;
	color: #f1f5fb;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-points span {
	font-size: 12px;
	color: #8e9db7;
}

:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	color: #75849e;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside-foot b {
	color: #cbd5e5;
	font-weight: 650;
}

/* ------------------------------------------------------------------ form */
:is(html.flexiu-login-page, body[data-path="login"]) .page-content-wrapper > main.container {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	position: relative;
	padding: clamp(28px, 5vw, 64px) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
:is(html.flexiu-login-page, body[data-path="login"]) main.container > .page_content {
	width: 100%;
	max-width: 440px;
	margin: 0;
}
:is(html.flexiu-login-page, body[data-path="login"]) section > .login-content.page-card {
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: clamp(24px, 3vw, 34px);
	gap: 22px;
	background: #fff;
	border: 1px solid #e3e8f1;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-head {
	gap: 14px !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 4px;
	color: #0f172a;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-brand .app-logo {
	display: block;
	width: 28px !important;
	height: 28px !important;
	max-height: none !important;
	object-fit: contain;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-eyebrow {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #5b3df5;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-head h4 {
	font-size: 27px !important;
	line-height: 1.18;
	font-weight: 750 !important;
	letter-spacing: -.035em;
	color: #0f172a !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-subtitle {
	margin-top: 6px;
	font-size: 14px !important;
	line-height: 1.55;
	color: #64748b !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .form-signin {
	gap: 18px !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-body {
	gap: 12px !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-body label {
	font-size: 12px !important;
	font-weight: 700;
	color: #475569 !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-body input[type="text"],
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-body input[type="email"],
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-body input[type="password"] {
	height: 48px !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	color: #0f172a !important;
	background: #fff !important;
	border: 1px solid #d7dfeb !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-body input:focus {
	border-color: #5b3df5 !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(91, 61, 245, .14) !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-actions .es-button[data-variant="solid"],
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-actions button[type="submit"] {
	min-height: 46px !important;
	border-radius: 10px !important;
	background: #5b3df5 !important;
	border-color: #5b3df5 !important;
	font-size: 14px !important;
	font-weight: 750 !important;
	box-shadow: 0 8px 18px rgba(91, 61, 245, .18) !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-actions .es-button[data-variant="solid"]:hover,
:is(html.flexiu-login-page, body[data-path="login"]) .page-card-actions button[type="submit"]:hover {
	background: #4c30e6 !important;
}
:is(html.flexiu-login-page, body[data-path="login"]) .btn-login-option {
	min-height: 44px;
	border-radius: 10px;
	border: 1px solid #dfe5ef;
	font-size: 13px;
	font-weight: 650;
	color: #334155;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
	color: #94a3b8;
	font-size: 11px;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-divider::before,
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	background: #e8edf4;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-links {
	display: grid;
	gap: 7px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #eef2f8;
	font-size: 12px;
	color: #64748b;
	line-height: 1.5;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-links a {
	color: #5b3df5;
	font-weight: 700;
	text-decoration: none;
}
:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-footer {
	margin: 16px 0 0;
	text-align: center;
	font-size: 11px;
	color: #94a3b8;
}

@media (max-width: 900px) {
	:is(html.flexiu-login-page, body[data-path="login"]) .page-content-wrapper {
		grid-template-columns: 1fr;
	}
	:is(html.flexiu-login-page, body[data-path="login"]) .flexiu-login-aside {
		display: none;
	}
	:is(html.flexiu-login-page, body[data-path="login"]) .page-content-wrapper > main.container {
		padding: 24px !important;
	}
	:is(html.flexiu-login-page, body[data-path="login"]) section > .login-content.page-card {
		padding: 24px;
	}
}