:root {
	--nl-page: rgb(255 255 255 / 0.14);
	--nl-ink: #12202f;
	--nl-ink-2: #3c4d61;
	--nl-ink-3: #7b8b9e;
	--nl-line: #e3e9f1;

	--nl-on-page: #eef3fc;
	--nl-on-page-dim: rgba(238, 243, 252, .78);

	--nl-brand: #005aa8;
	--nl-brand-hover: #0069c6;
	--nl-brand-deep: #003f78;
	--nl-accent: #e0007a;
	--nl-sky: #7ec8f5;

	--nl-blob-purple: rgb(225 54 120 / 0.53);
	--nl-blob-pink-light: rgb(225 54 120 / 0.53);
	--nl-blob-pink-neon: rgb(225 54 120 / 0.53);
	--nl-blob-blue-bright: rgb(3 77 150 / 0.53);
	--nl-blob-blue-deep: rgb(3 77 150 / 0.53);

	--nl-bad: #ba1a1a;
	--nl-bad-container: #ffdad6;
	--nl-bad-on-container: #93000a;
	--nl-good-container: #e2f0e4;
	--nl-good-on-container: #14532d;

	--nl-font-display: 'Quicksand', 'Nunito Sans', 'Open Sans', sans-serif;
	--nl-font-body: 'Inter', 'Nunito Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Página */
.new-login * { box-sizing: border-box; }

html.new-login,
body.new-login {
	height: 100%;
}

body.new-login {
	margin: 0;
	background: var(--nl-page) none;
	font-family: var(--nl-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--nl-ink);
	overflow-x: hidden;
	overflow-y: auto;
}

/* Logos decorativos fuera de la tarjeta (sin eventos de ratón: no tapan nada) */
.big-logo-login {
	position: fixed;
	/* offsets negativos: parte del símbolo queda fuera de la ventana */
	bottom: -3vmin;
	right: -3vmin;
	width: 32vmin;
	z-index: 1;
	opacity: .5;
	pointer-events: none;
}
.small-logo-login {
	position: fixed;
	top: 24px;
	left: 24px;
	width: 38px;
	z-index: 1;
	pointer-events: none;
}
.big-logo-login img,
.small-logo-login img {
	display: block;
	width: 100%;
	height: auto;
}
.login-screen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.login-main {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	animation: nlSlideUp .8s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Fondo animado: .mesh-bg crea el contexto de apilamiento contra el que los blobs hacen screen */
.mesh-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: var(--nl-page);
	overflow: hidden;
	pointer-events: none;
}
.mesh-gradient {
	position: absolute;
	inset: 0;
	opacity: .8;
	mix-blend-mode: screen;
}
.blob {
	position: absolute;
	border-radius: 50%;
	will-change: transform, translate;
}
/* vw en ancho y alto: los blobs se mantienen circulares */
.blob-1 { top: -20%;    left: -10%;  width: 30vw; height: 30vw; background: var(--nl-blob-purple);      filter: blur(120px); animation: nlFloatSlow   25s ease-in-out infinite; }
.blob-2 { bottom: -10%; right: -5%;  width: 20vw; height: 20vw; background: var(--nl-blob-blue-bright);  filter: blur(100px); animation: nlFloatMedium 20s ease-in-out infinite; }
.blob-3 { top: 20%;     left: 10%;   width: 40vw; height: 40vw; background: var(--nl-blob-blue-bright); filter: blur(140px); animation: nlFloatFast   15s ease-in-out infinite; }
.blob-4 { top: 0;       right: 10%;  width: 30vw; height: 30vw; background: var(--nl-blob-pink-neon);   filter: blur(80px);  animation: nlFloatSlow   25s ease-in-out infinite; }
.blob-5 { bottom: 10%;  left: 30%;   width: 10vw; height: 10vw; background: var(--nl-blob-blue-deep);   filter: blur(110px); animation: nlFloatMedium 20s ease-in-out infinite; }

@keyframes nlFloatSlow {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(40px, 60px) scale(1.1); }
	66%      { transform: translate(-20px, 40px) scale(.9); }
}
@keyframes nlFloatMedium {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(-50px, 30px) scale(.95); }
	66%      { transform: translate(30px, -20px) scale(1.05); }
}
@keyframes nlFloatFast {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(30px, -40px) scale(1.1); }
	66%      { transform: translate(-40px, 20px) scale(.9); }
}
@keyframes nlSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.login-main, .blob { animation: none; }
}

/* Cinta diagonal "LOCAL" en la esquina de la tarjeta */
.login-testenv {
	position: absolute;
	top: 0;
	left: 0px;
	width: 132px;
	height: 132px;
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
	border-top-right-radius: 24px;
	transform: rotate(-90deg);
}
.login-testenv span {
	position: absolute;
	top: 15px;
	right: -61px;
	width: 171px;
	padding: 6px 0;
	transform: rotate(45deg);
	background: linear-gradient(135deg, #e33678, #e33678);
	color: #fff;
	text-align: center;
	font-family: var(--nl-font-display);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Marca */
.login-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 36px;
	text-align: center;
}
.login-client-logo {
	width: 100%;
	padding: 10px 18px;
}
.login-client-logo img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .5s;
}
.login-client-logo img:hover { transform: scale(1.03); }
.login-brand .login-tagline {
	margin: 8px 0 0;
	font-family: var(--nl-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--nl-ink);
}

/* Glass card */
.glass-card {
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .4);
	box-shadow: 0 8px 32px 0 rgba(18, 32, 47, .07);
	border-radius: 24px;
	padding: 32px;
}
@media (min-width: 768px) {
	.glass-card { padding: 44px; }
}

/* Alert banner */
.login-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 16px;
	font-family: var(--nl-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	margin-bottom: 24px;
}
.login-alert i { margin-top: 2px; font-size: 16px; }
.login-alert--error {
	background: var(--nl-bad-container);
	color: var(--nl-bad-on-container);
}
.login-alert--success {
	background: var(--nl-good-container);
	color: var(--nl-good-on-container);
}

/* Formulario */
.nl-login-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 0 4px;
}
.field-label {
	margin: 0;
	padding: 0 4px;
	font-family: var(--nl-font-display);
	font-size: 14px;
	font-weight: 600;
	color: rgba(18, 32, 47, .8);
}
.field-label-row .field-label { padding: 0; }
.field-forgot {
	font-size: 12px;
	font-weight: 700;
	color: var(--nl-brand);
	text-decoration: none;
}
.field-forgot:hover, .field-forgot:focus { color: var(--nl-brand-hover); text-decoration: none; }

.field-wrap { position: relative; }

.field-icon-wrap {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
	background: rgb(3 77 150 / 0.1);
	padding: 10px;
	border-radius: 10px;
	filter: grayscale(1);
	transition: filter 0.2s ease;
}

.field-wrap:has(.field-input:focus) .field-icon-wrap {
	filter: grayscale(0);
}

.field-icon {
	font-size: 20px;
	color: var(--sl-blue);
	transition: color .2s ease;
	pointer-events: none;
	z-index: 2;
}
.field-wrap:focus-within .field-icon { color: var(--nl-brand); }

.field-input {
	width: 100%;
	height: auto;
	padding: 16px 16px 16px 64px;
	background: rgba(255, 255, 255, .5);
	border: 1px solid rgba(18, 32, 47, .08);
	border-radius: var(--sl-radius-md);
	box-shadow: none;
	font-family: var(--nl-font-body);
	font-size: 16px;
	line-height: 1.35;
	color: var(--nl-ink);
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder { color: rgba(123, 139, 158, .55); }
.field-input:focus {
	background: #fff;
	border-color: var(--nl-brand);
	box-shadow: 0 0 0 4px rgba(0, 90, 168, .12);
	outline: none;
}
.field-input--user { text-transform: uppercase; }
.field-input--password { padding-right: 48px; }

body.new-login input.field-input {
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.new-login input.field-input:focus {
	border: 1px solid var(--nl-brand) !important;
	box-shadow: 0 0 0 4px rgba(0, 90, 168, .12) !important;
}

/* autofill de Chrome: se tapa su fondo amarillo con una sombra inset */
body.new-login input.field-input:-webkit-autofill,
body.new-login input.field-input:-webkit-autofill:hover {
	-webkit-text-fill-color: var(--nl-ink);
	box-shadow: 0 0 0 100px #fff inset !important;
	caret-color: var(--nl-ink);
}
/* con foco, las dos sombras van en una sola declaración (la anterior lleva !important) */
body.new-login input.field-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--nl-ink);
	box-shadow: 0 0 0 100px #fff inset, 0 0 0 4px rgba(0, 90, 168, .12) !important;
}

.field-toggle {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	border-radius: 10px;
	color: var(--nl-ink-3);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
	z-index: 2;
}
.field-toggle:hover { color: var(--nl-brand); background: rgba(0, 90, 168, .07); }

/* jQuery .show() escribe display:block en línea: por eso el flex va en el <p> interno */
.warn-caps {
	display: none;
	margin: -8px 0 0;
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff4d6;
	color: #7a4c00;
}
.warn-caps p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--nl-font-body);
	font-size: 13px;
	font-weight: 600;
	color: inherit;
}

/* Submit button */
#login-form-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
}
#login-form-button-container .loading-dummy { color: var(--nl-brand) !important; }

.btn-juicy {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px;
	border: none;
	border-radius: 16px;
	background-color: var(--nl-brand);
	color: #fff;
	font-family: var(--nl-font-display);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px 0 rgba(0, 90, 168, .28);
	transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), box-shadow .3s ease, background-color .3s ease;
}
.btn-juicy:hover, .btn-juicy:focus {
	transform: scale(1.02);
	box-shadow: none !important;
	background-color: var(--nl-brand-hover);
	color: #fff;
	outline: none;
}
.btn-juicy:active { transform: scale(.98); }
.btn-juicy i { font-size: 17px; transition: transform .2s; }
.btn-juicy:hover i { transform: translateX(4px); }

/* Footer */
.login-footer {
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid rgba(18, 32, 47, .07);
	text-align: center;
}
.login-footer p {
	margin: 0;
	font-family: var(--nl-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--nl-ink-2);
}
.login-footer a {
	color: var(--nl-brand);
	font-weight: 700;
	text-decoration: none;
}
.login-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }