/* Login Visualize � identidad de landing-visualize.css, panel oscurecido ~20% */

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

html,
body {
	margin: 0;
	min-height: 100%;
}

body.login-body {
	min-height: 100vh;
	font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #1e293b;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.login-page {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(640px, 1.35fr) minmax(400px, 1fr);
	min-height: 100vh;
	max-width: 1480px;
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 1481px) {
	body.login-body::before {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: calc((100vw - 1480px) / 2 + 1480px * 1.35 / 2.35);
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
			linear-gradient(125deg, #182e6e 0%, #1e4fbc 32%, #632ebe 62%, #06748e 100%);
		background-size: 40px 40px, 40px 40px, 100% 100%;
		background-position: 0 0;
		z-index: 0;
		pointer-events: none;
	}

	.login-brand__grid {
		display: none;
	}
}

.login-brand {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 36px 40px 32px;
	background: linear-gradient(125deg, #182e6e 0%, #1e4fbc 32%, #632ebe 62%, #06748e 100%);
	color: #fff;
}

@media (min-width: 1481px) {
	.login-brand {
		background: transparent;
	}
}

.login-brand__grid,
.login-brand__glow {
	position: absolute;
	pointer-events: none;
}

.login-brand__grid {
	inset: 0;
	background-image:
		linear-gradient(#fff 1px, transparent 1px),
		linear-gradient(90deg, #fff 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.035;
}

.login-brand__glow {
	border-radius: 50%;
}

.login-brand__glow--amber {
	width: 420px;
	height: 420px;
	top: -120px;
	right: -80px;
	background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 68%);
}

.login-brand__glow--emerald {
	width: 360px;
	height: 360px;
	bottom: -140px;
	left: -60px;
	background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, transparent 70%);
}

.login-brand__inner {
	position: relative;
	z-index: 1;
	max-width: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}

.login-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	margin-bottom: 0;
	flex-shrink: 0;
}

.login-brand > .login-logo {
	position: relative;
	z-index: 1;
}

.login-logo__bars {
	display: block;
	flex-shrink: 0;
}

.login-logo__word {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.login-logo__name {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.login-logo__by {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.65);
}

.login-brand__headline {
	margin: 0 0 16px;
	font-size: 33px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
}

.login-brand__headline .login-brand__line1 {
	white-space: nowrap;
}

.login-brand__lead {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: #e2e8f0;
}

.login-brand__lead strong {
	color: #fff;
	font-weight: 700;
}

.login-brand__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}

.login-brand__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	color: #f1f5f9;
}

.login-brand__bullets svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.login-brand__bullets li:nth-child(1) svg { color: #86efac; }
.login-brand__bullets li:nth-child(2) svg { color: #7dd3fc; }
.login-brand__bullets li:nth-child(3) svg { color: #f9a8d4; }

/* ��� Mockup dashboard (decorativo) ��� */

.login-dash {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 100%;
}

.login-dash__window {
	position: relative;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 28px 64px rgba(15, 23, 42, 0.35);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.login-dash__titlebar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: linear-gradient(90deg, #f8fafc, #eef2ff);
	border-bottom: 1px solid #e2e8f0;
}

.login-dash__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

.login-dash__dot--red { background: #f87171; }
.login-dash__dot--yellow { background: #fbbf24; }
.login-dash__dot--green { background: #4ade80; }

.login-dash__title {
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
}

.login-dash__body {
	padding: 14px;
	background: #f8fafc;
}

.login-dash__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 10px;
}

.login-dash__kpi {
	padding: 10px 10px 8px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-top: 3px solid #94a3b8;
}

.login-dash__kpi--blue { border-top-color: #3b82f6; }
.login-dash__kpi--violet { border-top-color: #7c3aed; }
.login-dash__kpi--emerald { border-top-color: #10b981; }

.login-dash__kpi small {
	display: block;
	font-size: 9px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.login-dash__kpi strong {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
}

.login-dash__delta {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
}

.login-dash__delta--up {
	background: #dcfce7;
	color: #15803d;
}

.login-dash__delta--down {
	background: #fee2e2;
	color: #b91c1c;
}

.login-dash__charts {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr 0.9fr;
	gap: 8px;
}

.login-dash__panel {
	padding: 10px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	min-height: 110px;
}

.login-dash__panel-label {
	display: block;
	margin-bottom: 8px;
	font-size: 9px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.login-bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px;
	height: 72px;
	padding-top: 4px;
}

.login-bars__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: flex-end;
	gap: 4px;
}

.login-bars__bar {
	display: block;
	width: 100%;
	max-width: 18px;
	border-radius: 4px 4px 2px 2px;
	min-height: 8px;
}

.login-bars__bar--c1 { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.login-bars__bar--c2 { background: linear-gradient(180deg, #34d399, #059669); }
.login-bars__bar--c3 { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.login-bars__bar--c4 { background: linear-gradient(180deg, #fbbf24, #d97706); }
.login-bars__bar--c5 { background: linear-gradient(180deg, #f472b6, #db2777); }
.login-bars__bar--c6 { background: linear-gradient(180deg, #22d3ee, #0891b2); }

.login-bars__col i {
	font-style: normal;
	font-size: 8px;
	font-weight: 600;
	color: #94a3b8;
}

.login-line-chart {
	display: block;
	width: 100%;
	height: 72px;
}

.login-line-chart__line {
	fill: none;
	stroke: #0ea5e9;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.login-donut-wrap {
	position: relative;
	width: 64px;
	height: 64px;
	margin: 0 auto 6px;
}

.login-donut {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.login-donut__ring { stroke: #e2e8f0; }
.login-donut__seg { stroke-linecap: round; }
.login-donut__seg--1 { stroke: #3b82f6; }
.login-donut__seg--2 { stroke: #10b981; }
.login-donut__seg--3 { stroke: #f59e0b; }

.login-donut__center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	color: #334155;
}

.login-legend {
	list-style: none;
	margin: 0;
	padding: 0;
}

.login-legend li {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 8px;
	font-weight: 600;
	color: #64748b;
	padding: 2px 0;
}

.login-legend__swatch {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex-shrink: 0;
}

.login-legend__swatch--1 { background: #3b82f6; }
.login-legend__swatch--2 { background: #10b981; }
.login-legend__swatch--3 { background: #f59e0b; }

/* ��� Panel derecho (formulario) ��� */

.login-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 48px 32px 40px;
	background: #fff;
	min-width: 0;
}

.login-panel__inner {
	width: 100%;
	max-width: 380px;
	margin-left: 40px;
}

.login-panel__support {
	position: absolute;
	top: 24px;
	right: 28px;
	font-size: 12px;
	font-weight: 600;
	color: #1d4ed8;
	text-decoration: none;
}

.login-panel__support:hover {
	color: #1e40af;
	text-decoration: underline;
}

.login-compact {
	display: none;
	align-items: center;
	margin-bottom: 28px;
}

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

.login-form__title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.login-form__subtitle {
	margin: 0 0 28px;
	font-size: 14px;
	color: #64748b;
}

.login-field {
	margin-bottom: 16px;
}

.login-field__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.login-field__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #334155;
}

.login-field__forgot {
	font-size: 12px;
	font-weight: 600;
	color: #1d4ed8;
	text-decoration: none;
	white-space: nowrap;
}

.login-field__forgot:hover {
	color: #1e40af;
	text-decoration: underline;
}

.login-field__control {
	position: relative;
}

.login-field__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: #94a3b8;
	pointer-events: none;
}

.login-field__control input {
	width: 100%;
	height: 46px;
	padding: 0 14px 0 40px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: #0f172a;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field__control input:focus {
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.login-field__control input::placeholder {
	color: #94a3b8;
}

.login-field__control--password input {
	padding-right: 44px;
}

.login-field__toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.login-field__toggle:hover,
.login-field__toggle:focus-visible {
	color: #334155;
	background: #f1f5f9;
	outline: none;
}

.login-field__toggle .icon-hide {
	display: none;
}

.login-field__toggle.is-shown .icon-show {
	display: none;
}

.login-field__toggle.is-shown .icon-hide {
	display: block;
}

.login-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 20px;
	font-size: 13px;
	color: #64748b;
	cursor: pointer;
	user-select: none;
}

.login-check input {
	width: 16px;
	height: 16px;
	accent-color: #1d4ed8;
	flex-shrink: 0;
}

.login-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	padding: 0 20px;
	border: none;
	border-radius: 10px;
	background: #1d4ed8;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.login-submit:hover {
	background: #1e40af;
}

.login-submit:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}

.login-fineprint {
	margin: 18px 0 0;
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
}

/* ��� Responsive: panel marca oculto <1200px ��� */

@media (max-width: 1199px) {
	.login-page {
		grid-template-columns: 1fr;
	}

	.login-brand {
		display: none;
	}

	.login-compact {
		display: flex;
	}

	.login-compact .login-logo__name {
		color: #0f172a;
		background: linear-gradient(90deg, #2563eb, #7c3aed);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.login-compact .login-logo__by {
		color: #64748b;
	}

	.login-compact .login-logo__bar--mid {
		fill: #1e293b;
	}

	.login-panel {
		padding: 28px 20px 32px;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.login-panel__inner {
		margin-left: 0;
	}

	.login-panel__support {
		position: static;
		display: block;
		width: 100%;
		max-width: none;
		margin: 0 0 10px;
		text-align: right;
		line-height: 1.35;
		white-space: normal;
	}
}

@media (max-width: 420px) {
	.login-form__title {
		font-size: 22px;
	}

	.login-panel__support {
		font-size: 11px;
		max-width: 100%;
		text-align: right;
	}
}