/* ===== LOGIN BASE ===== */
.col-centro{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 16px;
	z-index: 10;
}

.login-form{
	width: min(420px, 100%);
	padding: 22px 18px;
	border-radius: 18px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(12px);
	box-shadow: 0 18px 60px rgba(0,0,0,0.30);
}


.login-form h2{
	margin: 0 0 14px 0;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 0.2px;
	text-align:center;
}

/* ===== INPUTS ===== */
.login-field{
	margin-bottom: 12px;
}

.login-input{
	width:100%;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.06);
	outline:none;
	color: rgba(255,255,255,0.92);
	font-size: 14px;
	transition: 0.18s ease;
}

.login-input::placeholder{
	color: rgba(255,255,255,0.55);
}

.login-input:focus{
	border-color: rgba(79,124,255,0.45);
	box-shadow: 0 0 0 4px rgba(79,124,255,0.12);
}

/* ===== PASSWORD EYE ===== */
.login-password{
	position: relative;
}

.login-password .login-input{
	padding-right: 52px; /* espacio para el ojito */
}

.login-eye{
	position:absolute;
	right: 10px;
	top:50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: none;
	cursor:pointer;
	transition: 0.18s ease;
	display:flex;
	align-items:center;
	justify-content:center;
	border: none;
}

.login-eye:hover{
	transform: translateY(-50%) translateY(-1px);
	background: none;
}

.login-eye:active{
	transform: translateY(-50%);
}

/* ===== OJO (icono CSS, sin librerías) ===== */
.eye{
	width: 18px;
	height: 18px;
	position: relative;
	display:block;
	opacity: 0.85;
}

/* ojo cerrado (default) */
.eye.eye-closed::before{
	content:"";
	position:absolute;
	inset: 0;
	border: 2px solid rgba(255,255,255,0.75);
	border-radius: 999px;
}

.eye.eye-closed::after{
	content:"";
	position:absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 2px;
	background: rgba(255,255,255,0.75);
	transform: rotate(-18deg);
}

/* ojo abierto */
.eye.eye-open::before{
	content:"";
	position:absolute;
	inset: 0;
	border: 2px solid rgba(255,255,255,0.75);
	border-radius: 999px;
}

.eye.eye-open::after{
	content:"";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255,255,255,0.75);
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

/* ===== CHECKBOX ===== */
.custom-checkbox{
	display:flex;
	align-items:center;
	gap:10px;
	margin: 10px 0 14px 0;
	font-size: 13px;
	color: rgba(255,255,255,0.70);
	user-select:none;
}

.custom-checkbox input{
	display:none;
}

.custom-checkbox .checkmark{
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.20);
	background: rgba(255,255,255,0.05);
	position:relative;
}

.custom-checkbox input:checked + .checkmark{
	border-color: rgba(32,201,151,0.35);
	background: rgba(32,201,151,0.12);
}

.custom-checkbox input:checked + .checkmark::after{
	content:"";
	width: 9px;
	height: 5px;
	border-left: 2px solid rgba(255,255,255,0.92);
	border-bottom: 2px solid rgba(255,255,255,0.92);
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -60%) rotate(-45deg);
}

/* ===== BOTÓN ===== */
.login-btn{
	width:100%;
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid rgba(79,124,255,0.35);
	background: linear-gradient(135deg, rgba(79,124,255,0.22), rgba(124,77,255,0.18));
	color: rgba(255,255,255,0.92);
	font-weight: 800;
	cursor:pointer;
	transition: 0.18s ease;
}

.login-btn:hover{
	transform: translateY(-1px);
	background: linear-gradient(135deg, rgba(79,124,255,0.28), rgba(124,77,255,0.22));
}

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