/* ===== Login / Recuperar clave — diseño corporativo ===== */
.login-page{
	position:fixed; inset:0; z-index:50; overflow:auto;
	display:flex; align-items:flex-start; justify-content:center;
	padding:9vh 20px 30px;
	font-family:'Quicksand','Segoe UI',Arial,sans-serif;
	background:linear-gradient(135deg,#2b3e52 0%,#245f79 100%);
}
.login-page:before{
	content:""; position:absolute; inset:0;
	background:radial-gradient(circle at 78% 18%, rgba(146,205,208,.18), transparent 42%),
	          radial-gradient(circle at 12% 88%, rgba(146,205,208,.12), transparent 40%);
}
.login-card{
	position:relative; width:100%; max-width:380px;
	background:#fff; border-radius:16px; padding:36px 32px 30px;
	box-shadow:0 24px 60px -18px rgba(10,25,40,.55);
	text-align:center;
}
.login-card .brand{ margin-bottom:6px; }
.login-card .brand img{ width:190px; max-width:80%; height:auto; }
.login-card .subtitle{
	color:#7c8798; font-size:12px; letter-spacing:.4px;
	margin:2px 0 22px; text-transform:uppercase;
}
.login-card h3{ margin:0 0 4px; color:#33404f; font-size:17px; }
.login-note{ color:#7c8798; font-size:12.5px; margin:0 0 20px; line-height:1.5; }

.login-error{
	display:flex; align-items:center; gap:8px;
	background:#fff2f2; border:1px solid #f3c9c9; color:#b23b3b;
	border-radius:9px; padding:10px 12px; font-size:12.5px;
	margin-bottom:16px; text-align:left;
}
.login-ok{
	display:flex; align-items:flex-start; gap:10px;
	background:#eef7f1; border:1px solid #cbe6d6; color:#2f7a52;
	border-radius:10px; padding:14px; font-size:13px;
	margin-bottom:18px; text-align:left; line-height:1.5;
}
.login-ok .fa-solid{ margin-top:2px; font-size:16px; }

.login-field{ position:relative; margin-bottom:14px; }
.login-field > .ic{
	position:absolute; left:14px; top:50%; transform:translateY(-50%);
	color:#9aa7b8; font-size:14px;
}
.login-field input{
	width:100%; box-sizing:border-box;
	padding:12px 42px 12px 40px;
	border:1px solid #dde3ea; border-radius:10px;
	font-size:14px; color:#33404f; background:#fbfcfd;
	font-family:inherit; transition:border-color .18s, box-shadow .18s, background .18s;
}
.login-field input::placeholder{ color:#aab3c0; }
.login-field input:focus{
	outline:none; border-color:#2c5f6f; background:#fff;
	box-shadow:0 0 0 3px rgba(44,95,111,.14);
}
.login-field:focus-within > .ic{ color:#2c5f6f; }
.login-field .toggle{
	position:absolute; right:12px; top:50%; transform:translateY(-50%);
	color:#9aa7b8; cursor:pointer; font-size:14px; padding:4px;
}
.login-field .toggle:hover{ color:#2c5f6f; }

.btn-login{
	width:100%; border:0; cursor:pointer; display:block;
	padding:13px; margin-top:6px;
	border-radius:10px; color:#fff !important; font-size:14px; font-weight:600;
	letter-spacing:.4px; font-family:inherit; text-decoration:none; text-align:center;
	box-sizing:border-box;
	background:linear-gradient(135deg,#3d5877 0%,#245f79 100%);
	box-shadow:0 10px 22px -10px rgba(36,95,121,.8);
	transition:transform .12s, box-shadow .18s, filter .18s;
}
.btn-login:hover{ filter:brightness(1.07); box-shadow:0 14px 26px -10px rgba(36,95,121,.9); }
.btn-login:active{ transform:translateY(1px); }
.btn-ghost{
	display:inline-block; margin-top:16px;
	color:#5b6b7d; font-size:12px; text-decoration:none; transition:color .16s;
}
.btn-ghost:hover{ color:#2c5f6f; text-decoration:underline; }

.login-forgot{ margin-top:16px; }
.login-forgot a{ color:#5b6b7d; font-size:12px; text-decoration:none; transition:color .16s; }
.login-forgot a:hover{ color:#2c5f6f; text-decoration:underline; }
.login-foot{
	position:absolute; bottom:18px; left:0; right:0;
	text-align:center; color:rgba(255,255,255,.75); font-size:11px; letter-spacing:.5px;
}