/* Fullarg login — página pública /login */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
	--fullarg-navy: #0b2a4a;
	--fullarg-navy-dark: #071a2b;
	--fullarg-cyan: #00aeef;
	--fullarg-cyan-light: #3bc4f5;
	--fullarg-sky: #e8f6fd;
	--fullarg-surface: #f4f8fb;
	--fullarg-ink: #243b53;
	--fullarg-muted: #486581;
	--fullarg-border: #d5e2ec;
	--fullarg-font-display: "Archivo", "Segoe UI", sans-serif;
	--fullarg-font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
}

body[data-path="login"],
.page_content .for-login,
.page_content .login-content {
	font-family: var(--fullarg-font-body);
}

html:has(body[data-path="login"]) {
	height: 100%;
	overflow: hidden;
}

/* Shell split: visual izq + form der — cabe en viewport sin scroll */
body[data-path="login"] {
	background: var(--fullarg-surface) !important;
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	overflow: hidden !important;
}

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] footer {
	display: none !important;
}

body[data-path="login"] #page-login,
body[data-path="login"] .page-content-wrapper {
	display: flex !important;
	align-items: stretch;
	height: 100%;
	min-height: 0 !important;
	max-height: 100%;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

body[data-path="login"] main.container {
	flex: 1 1 48%;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: clamp(16px, 3vh, 40px) clamp(16px, 3vw, 40px) !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--fullarg-surface);
	min-height: 0 !important;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	position: relative;
}

.fullarg-login-back {
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fullarg-navy) !important;
	text-decoration: none;
	padding: 6px 8px;
	border-radius: 8px;
}

.fullarg-login-back:hover {
	background: rgba(11, 42, 74, 0.06);
	color: var(--fullarg-cyan) !important;
}

/* Desktop: más aire bajo el link "Volver" (no afecta ≤960px) */
@media (min-width: 961px) {
	body[data-path="login"] main.container {
		padding-top: clamp(56px, 9vh, 88px) !important;
	}
}

/* —— Panel visual izquierdo (marca fullarg.com) —— */
.fullarg-login-visual {
	flex: 1 1 52%;
	position: relative;
	min-height: 0;
	height: 100%;
	overflow: hidden;
	background:
		radial-gradient(ellipse 900px 560px at 16% 8%, rgba(0, 174, 239, 0.32), transparent 58%),
		radial-gradient(ellipse 720px 520px at 92% 72%, rgba(59, 196, 245, 0.16), transparent 52%),
		radial-gradient(ellipse 480px 360px at 48% 48%, rgba(0, 174, 239, 0.08), transparent 60%),
		linear-gradient(165deg, #061522 0%, var(--fullarg-navy-dark) 28%, var(--fullarg-navy) 62%, #0a2340 100%);
	color: #fff;
	display: flex;
	align-items: flex-end;
	padding: clamp(40px, 6vh, 56px) clamp(36px, 4vw, 52px);
	box-sizing: border-box;
	isolation: isolate;
}

.fullarg-login-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 48px 48px;
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
	mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 20%, transparent 85%);
}

.fullarg-login-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(7, 26, 43, 0.15) 0%,
			transparent 28%,
			transparent 48%,
			rgba(7, 26, 43, 0.72) 100%
		),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.035) 2px,
			rgba(0, 0, 0, 0.035) 4px
		);
	pointer-events: none;
	z-index: 1;
	opacity: 0.95;
}

.fullarg-login-visual-atmos {
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 42% 36% at 22% 18%, rgba(0, 174, 239, 0.28), transparent 70%),
		radial-gradient(ellipse 38% 34% at 78% 78%, rgba(59, 196, 245, 0.18), transparent 68%);
	animation: fullargLoginAmbient 22s ease-in-out infinite alternate;
	filter: blur(2px);
}

.fullarg-login-visual-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(28px);
}

.fullarg-login-visual-orb--a {
	width: min(420px, 55%);
	height: min(420px, 55%);
	left: -8%;
	top: 6%;
	background: rgba(0, 174, 239, 0.22);
	animation: fullargLoginOrbA 16s ease-in-out infinite alternate;
}

.fullarg-login-visual-orb--b {
	width: min(360px, 48%);
	height: min(360px, 48%);
	right: -6%;
	bottom: 10%;
	background: rgba(59, 196, 245, 0.14);
	animation: fullargLoginOrbB 19s ease-in-out infinite alternate;
}

.fullarg-login-visual-mark {
	position: absolute;
	right: -6%;
	top: 6%;
	width: min(540px, 78%);
	height: auto;
	opacity: 0.2;
	pointer-events: none;
	user-select: none;
	filter: brightness(1.35) drop-shadow(0 0 40px rgba(0, 174, 239, 0.25));
	z-index: 0;
	animation: fullargLoginMarkFloat 14s ease-in-out infinite alternate;
}

.fullarg-login-visual-inner {
	position: relative;
	z-index: 2;
	max-width: 460px;
	animation: fullargLoginRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fullarg-login-visual-wordmark {
	font-family: var(--fullarg-font-display);
	font-size: clamp(1.85rem, 3.4vw, 2.45rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 32px;
	color: #fff;
	text-shadow: 0 0 40px rgba(0, 174, 239, 0.18);
}

.fullarg-login-visual-wordmark em {
	font-style: normal;
	color: var(--fullarg-cyan);
}

.fullarg-login-visual .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fullarg-font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fullarg-cyan-light);
	margin-bottom: 16px;
}

.fullarg-login-visual .eyebrow-pulse {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--fullarg-cyan);
	box-shadow: 0 0 12px var(--fullarg-cyan);
	animation: fullargLoginPulse 2s ease-in-out infinite;
}

.fullarg-login-visual h1 {
	font-family: var(--fullarg-font-display);
	font-size: clamp(1.95rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.035em;
	margin: 0 0 16px;
	color: #fff;
}

.fullarg-login-visual h1 span {
	background: linear-gradient(90deg, var(--fullarg-cyan), #7dd3fc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.fullarg-login-visual .lede {
	font-size: 1.08rem;
	line-height: 1.55;
	color: rgba(232, 240, 246, 0.86);
	margin: 0;
	max-width: 38ch;
}

.fullarg-login-visual-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
}

.fullarg-login-visual-pills span {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(232, 240, 246, 0.92);
	border: 1px solid rgba(0, 174, 239, 0.38);
	background: rgba(0, 174, 239, 0.12);
	padding: 8px 13px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

@keyframes fullargLoginAmbient {
	from { opacity: 0.72; transform: scale(1); }
	to { opacity: 1; transform: scale(1.05); }
}

@keyframes fullargLoginOrbA {
	from { transform: translate(0, 0); opacity: 0.7; }
	to { transform: translate(28px, 18px); opacity: 1; }
}

@keyframes fullargLoginOrbB {
	from { transform: translate(0, 0); opacity: 0.65; }
	to { transform: translate(-22px, -16px); opacity: 1; }
}

@keyframes fullargLoginMarkFloat {
	from { transform: translateY(0) rotate(0deg); }
	to { transform: translateY(14px) rotate(-1.5deg); }
}

@keyframes fullargLoginRise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fullargLoginPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
	.fullarg-login-visual-atmos,
	.fullarg-login-visual-orb,
	.fullarg-login-visual-mark,
	.fullarg-login-visual-inner,
	.fullarg-login-visual .eyebrow-pulse {
		animation: none !important;
	}
}

/* —— Formulario (derecha) —— */
.page_content .for-login,
.page_content .for-forgot,
.page_content .for-login-with-email-link,
.page_content .for-signup,
.page_content .for-email-login {
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}

.page_content .login-content.page-card {
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 40px rgba(11, 42, 74, 0.08) !important;
	background: #fff !important;
	padding: clamp(16px, 2.5vh, 28px) clamp(18px, 2.5vw, 28px) clamp(14px, 2vh, 22px) !important;
	overflow: hidden;
}

.page_content .for-login .page-card-head,
.page_content .login-content .page-card-head {
	border: none !important;
	padding: 4px 0 12px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column;
	align-items: center !important;
	justify-content: center !important;
}

/* Logo nativo Frappe: oculto (el branding lo pone .fullarg-login-brand) */
.page_content .for-login .page-card-head > img.app-logo,
.page_content .login-content .page-card-head > img.app-logo,
.page_content .for-login .page-card-head > .page-card-head-text,
.page_content .login-content .page-card-head > .page-card-head-text,
.page_content .for-login .page-card-head h4,
.page_content .login-content .page-card-head .title {
	display: none !important;
}

.page_content .for-login .fullarg-login-brand img,
.page_content .login-content .fullarg-login-brand img,
body[data-path="login"] .navbar-brand img {
	content: url("/assets/wms_3pl/images/fullarg-logo.png");
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-height: clamp(44px, 7vh, 64px) !important;
	width: auto !important;
	height: clamp(44px, 7vh, 64px) !important;
	object-fit: contain;
	float: none !important;
}

.fullarg-login-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}

.fullarg-login-brand-link {
	display: inline-flex;
	line-height: 0;
	text-decoration: none;
}

.fullarg-login-brand-link:hover {
	opacity: 0.88;
}

.fullarg-login-brand img {
	height: clamp(44px, 7vh, 64px);
	width: auto;
}

.fullarg-login-brand .name {
	font-size: clamp(1.1rem, 2.2vh, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fullarg-navy);
	line-height: 1.1;
}

.fullarg-login-brand .tag {
	font-size: 0.8rem;
	color: var(--fullarg-muted);
	margin-top: -2px;
}

.page_content .for-login .form-group,
.page_content .login-content .form-group {
	margin-bottom: clamp(8px, 1.4vh, 14px) !important;
}

.page_content .for-login .form-control,
.page_content .login-content .form-control {
	border-radius: 10px !important;
	border-color: var(--fullarg-border) !important;
	min-height: clamp(38px, 5.5vh, 44px);
	color: var(--fullarg-ink);
}

.page_content .for-login .form-control:focus,
.page_content .login-content .form-control:focus {
	border-color: var(--fullarg-cyan) !important;
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important;
}

.fullarg-pass-wrap {
	position: relative;
	display: block;
	width: 100%;
}

.fullarg-pass-wrap .form-control {
	padding-right: 44px !important;
	width: 100%;
}

/* Un solo ojo: ocultar toggle nativo de Frappe (queda solo .fullarg-pass-toggle) */
body[data-path="login"] .password-field > .toggle-password,
body[data-path="login"] .password-field .toggle-password,
.page_content .for-login .password-field .toggle-password,
.page_content .login-content .password-field .toggle-password,
.fullarg-pass-wrap .toggle-password,
.fullarg-pass-wrap .btn-hide-password,
.fullarg-pass-wrap .btn-show-password,
.page_content .for-login .form-group:has(.fullarg-pass-wrap) > .toggle-password,
.page_content .for-login .form-group:has(.fullarg-pass-wrap) > .btn-hide-password,
.page_content .login-content .form-group:has(.fullarg-pass-wrap) > .toggle-password,
.page_content .login-content .form-group:has(.fullarg-pass-wrap) > .btn-hide-password,
body[data-path="login"] .form-group:has([data-fullarg-eye="1"]) .toggle-password,
body[data-path="login"] .form-group:has([data-fullarg-eye="1"]) > .btn-hide-password {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}


.fullarg-pass-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--fullarg-muted);
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 2;
}

.fullarg-pass-toggle:hover {
	color: var(--fullarg-navy);
	background: rgba(11, 42, 74, 0.06);
}

.fullarg-pass-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
}

.fullarg-pass-toggle .eye-off {
	display: none;
}

.fullarg-pass-toggle.is-visible .eye-open {
	display: none;
}

.fullarg-pass-toggle.is-visible .eye-off {
	display: block;
}

.page_content .for-login .btn-login,
.page_content .for-login .btn-primary,
.page_content .login-content .btn-login {
	background: var(--fullarg-navy) !important;
	border-color: var(--fullarg-navy) !important;
	border-radius: 10px !important;
	min-height: clamp(40px, 5.8vh, 46px);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.page_content .for-login .btn-login:hover,
.page_content .login-content .btn-login:hover {
	background: var(--fullarg-navy-dark) !important;
	border-color: var(--fullarg-navy-dark) !important;
}

.page_content .for-login a,
.page_content .login-content a {
	color: var(--fullarg-cyan) !important;
}

.page_content .for-login .forgot-password-message,
.page_content .login-content .forgot-password-message {
	margin: 0 0 clamp(8px, 1.2vh, 12px) !important;
}

.fullarg-login-foot {
	display: none !important;
}

/* —— Responsive ancho —— */
@media (max-width: 960px) {
	body[data-path="login"] {
		overflow: auto !important;
		height: auto;
		max-height: none;
	}

	body[data-path="login"] #page-login,
	body[data-path="login"] .page-content-wrapper {
		flex-direction: column;
		height: auto;
		max-height: none;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: visible;
		justify-content: center;
		align-items: stretch;
	}

	/* En mobile no mostrar el panel visual de marca */
	.fullarg-login-visual {
		display: none !important;
	}

	/* Card centrada en viewport; el back queda absolute y no empuja el form */
	body[data-path="login"] main.container {
		flex: 1 1 auto;
		min-height: 100vh;
		min-height: 100dvh;
		height: auto;
		padding: 48px 16px !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}

	body[data-path="login"] main.container .page_content,
	body[data-path="login"] main.container .page_content > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex: 1 1 auto;
	}

	.fullarg-login-back {
		top: 12px;
		left: 12px;
	}
}

@media (max-height: 760px) and (min-width: 961px) {
	.fullarg-login-visual {
		padding: 32px 36px;
	}

	.fullarg-login-visual-wordmark {
		font-size: 1.65rem;
		margin-bottom: 18px;
	}

	.fullarg-login-visual .eyebrow {
		margin-bottom: 10px;
	}

	.fullarg-login-visual h1 {
		font-size: 1.75rem;
		margin-bottom: 10px;
	}

	.fullarg-login-visual .lede {
		font-size: 0.95rem;
		line-height: 1.45;
	}

	.fullarg-login-visual-pills {
		margin-top: 18px;
	}

	.fullarg-login-visual-pills span {
		padding: 6px 11px;
	}

	.page_content .for-login .page-card-body .form-control,
	.page_content .login-content .form-control {
		min-height: 38px;
	}

	.page_content .for-login .btn-login,
	.page_content .login-content .btn-login {
		min-height: 40px;
	}
}

@media (max-height: 640px) and (min-width: 961px) {
	.fullarg-login-visual-pills {
		display: none;
	}

	.fullarg-login-brand .tag {
		display: none;
	}

	.page_content .login-content.page-card {
		box-shadow: none !important;
		padding: 12px 16px !important;
	}
}

@media (max-width: 480px) {
	.page_content .login-content.page-card {
		padding: 16px 14px 12px !important;
		box-shadow: none !important;
		background: transparent !important;
	}
}