/* Login CSS
//--------------------------------------------------------------------- */
div.magnetic-splash div.magnetic-splash-item { color: var(--color-principal); }

#splash {
	height: 100vh;
	background: var(--color-dark-blue-2);
	position: relative;
	opacity: 1;
}

#splash.activo {
	animation: splash 1s ease;
	-webkit-animation: splash 1s ease;
}

@keyframes splash {
	0% { height: 0; opacity: 0; }
	100% { height: 100vh; opacity: 1; }
}

#splash div.item {
	padding-top: 80px;
	position: relative;
	width: 100%;
	height: 100%;
}

#splash div.item div.item-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

#splash div.item div.container {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#splash div.item div.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #222222da 0, #3333331a 100%);
	opacity: .5;
}

div.login-form {
	background: var(--color-blanco);
	border: 1px solid var(--color-gris-azulado-claro);
	padding: 30px;
	max-width: 600px;
	margin: 0 auto;
}

div.login-form .heading {
	font-weight: 500;
	color: var(--color-teal);
	font-family: var(--font-family-secundaria);
	margin-bottom: 15px;
}

div.login-form input {
	display: block;
    width: 100%;
    border: none;
    background: var(--color-clear);
    padding: 15px;
	margin-bottom: 10px;
	height: 50px;
}

div.login-form button {
	display: inline-block;
	padding: 10px 20px;
	border: none;
	background: var(--gradient-main);
	color: var(--color-blanco);
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	letter-spacing: 1px;
	cursor: pointer;
}

div.login-form button::before {
	content: '';
	display: block;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--gradient-main);
	z-index: -1;
	transition: width .3s ease;
}

div.login-form button::before { width: 100%; }
div.login-form button:hover { background: var(--color-dark-blue-2); }

div.login-form div.botones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 10px;
}

div.login-form div.botones div.item-x:last-child { text-align: right; }

div.login-form div.botones div.item-x a {
	display: inline-block;
	color: var(--color-teal);
	text-decoration: underline;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
}

div.login-form div.botones div.item-x a:hover { color: var(--color-blue); }

div.login-form div.mensajes { margin: 15px 0; }

div.login-form div.mensajes div.item-msg {
	position: relative;
	padding: 10px 15px;
	color: var(--color-gris-azulado);
	background: var(--color-clear-2);
}

div.login-form div.mensajes div.item-msg::before {
	content: '';
	display: block;
	width: 5px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--color-teal);
}