/* =============================================
   ERP Bicephalus — Login (Tema Claro)
   ============================================= */

.login-wrapper{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	padding:20px;
	background:linear-gradient(135deg,#f0f2f5 0%,#e2e8f0 50%,#dbeafe 100%);
	position:relative;
	overflow:hidden;
}

/* Fondo decorativo */
.login-wrapper::before{
	content:'';
	position:absolute;
	width:600px;
	height:600px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(37,99,235,0.07) 0%,transparent 70%);
	top:-200px;
	right:-200px;
	pointer-events:none;
}
.login-wrapper::after{
	content:'';
	position:absolute;
	width:400px;
	height:400px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(79,70,229,0.05) 0%,transparent 70%);
	bottom:-150px;
	left:-100px;
	pointer-events:none;
}

.login-card{
	width:100%;
	max-width:420px;
	background:#ffffff;
	border:1px solid rgba(0,0,0,0.06);
	border-radius:var(--radius-xl);
	padding:40px;
	position:relative;
	z-index:1;
	box-shadow:0 20px 60px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04);
	animation:loginFadeIn 0.6s ease;
}

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

/* Header */
.login-header{
	text-align:center;
	margin-bottom:32px;
}

.login-logo{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	border-radius:var(--radius-lg);
	background:linear-gradient(135deg,#2563eb,#4f46e5);
	color:#fff;
	margin-bottom:20px;
	box-shadow:0 8px 32px rgba(37,99,235,0.25);
}

.login-title{
	font-size:24px;
	font-weight:700;
	color:var(--text-primary);
	margin:0 0 8px 0;
	letter-spacing:-0.5px;
}

.login-subtitle{
	font-size:14px;
	color:var(--text-secondary);
	margin:0;
	font-weight:400;
}

/* Formulario */
.form-group{
	margin-bottom:20px;
}

.form-group label{
	display:block;
	font-size:13px;
	font-weight:500;
	color:var(--text-primary);
	margin-bottom:6px;
}

.input-wrapper{
	position:relative;
	display:flex;
	align-items:center;
}

.input-wrapper>svg:first-child{
	position:absolute;
	left:14px;
	color:var(--text-secondary);
	pointer-events:none;
	flex-shrink:0;
	z-index:1;
}

.form-input{
	width:100%;
	padding:12px 44px 12px 44px;
	background:#f8fafc;
	border:1px solid var(--border);
	border-radius:var(--radius);
	color:var(--text-primary);
	font-size:14px;
	font-family:var(--font-family);
	transition:var(--transition);
	outline:none;
}

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

.form-input:focus{
	border-color:#2563eb;
	background:#fff;
	box-shadow:0 0 0 3px rgba(37,99,235,0.1);
}

.toggle-password{
	position:absolute;
	right:8px;
	top:50%;
	transform:translateY(-50%);
	background:none;
	border:none;
	cursor:pointer;
	color:var(--text-secondary);
	padding:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:var(--transition);
	z-index:1;
	border-radius:6px;
}
.toggle-password:hover{
	color:var(--text-primary);
	background:rgba(0,0,0,0.04);
}

/* Respuesta */
.login-response{
	display:none;
}
.login-response .alert{
	margin:0;
}

/* Botón login */
.btn-login{
	width:100%;
	padding:13px 24px;
	background:linear-gradient(135deg,#2563eb,#4f46e5);
	color:#fff;
	border:none;
	border-radius:var(--radius);
	font-size:15px;
	font-weight:600;
	font-family:var(--font-family);
	cursor:pointer;
	transition:var(--transition);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	position:relative;
	overflow:hidden;
}

.btn-login:hover:not(:disabled){
	transform:translateY(-1px);
	box-shadow:0 8px 24px rgba(37,99,235,0.3);
}

.btn-login:active:not(:disabled){
	transform:translateY(0);
}

.btn-login:disabled{
	opacity:0.7;
	cursor:not-allowed;
}

.btn-loader{
	display:flex;
	align-items:center;
	gap:8px;
}

@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}
.spin{
	animation:spin 1s linear infinite;
}

/* Footer */
.login-footer{
	text-align:center;
	margin-top:28px;
	padding-top:20px;
	border-top:1px solid var(--border);
}

.login-footer p{
	font-size:12px;
	color:var(--text-secondary);
	margin:0;
}

/* Responsive */
@media (max-width:480px){
	.login-card{
		padding:28px 24px;
		border-radius:var(--radius-lg);
	}
	.login-logo{
		width:60px;
		height:60px;
	}
	.login-title{
		font-size:20px;
	}
}