html,
body {
	height: 100%;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	background: #000b49 !important;
}

.auth-layout {
	display: flex;
	flex-direction: row;
	height: 100vh; /* Asegura que el diseño ocupe toda la pantalla */
	background: linear-gradient(90deg, #000b49 50%, #ffffff 50%);
}

/* --- Columna Izquierda --- */
.auth-left {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ffffff;
}

/* --- Columna Derecha --- */
.auth-right {
	flex: 1;
	position: relative;
	background: #0a2472;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	color: #ffffff;
	background-image: url('../img/default/espora-fondo.jpg'); /* Cambia esto a la ruta de tu SVG */
	background-size: cover;
	background-repeat: repeat;
	background-blend-mode: multiply;
}

.auth-content {
	width: 90%;
	max-width: 500px;
	text-align: center;
}

.auth-header .logo {
	max-width: 200px;
	margin-bottom: 20px;
}

.auth-box {
	background: rgba(10, 36, 114, 0.1);
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0px 0px 15px 15px rgb(3 13 72 / 30%);
}

.auth-box button {
	background-color: #0a2472;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

.auth-box button:hover {
	background-color: #a6e1fa;
}

.auth-image {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.7;
	margin-top: 2em;
}

.auth-image img {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.auth-video {
	flex: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.auth-video video {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	opacity: 0.9;
}

.auth-footer {
	text-align: center;
	font-size: 14px;
	margin-top: 20px;
}

.auth-footer a {
	color: #00f9ff !important;
}

/* --- Media Queries for Responsive Design --- */

/* Tablets */
@media (max-width: 1024px) {
	.auth-layout {
		flex-direction: column; /* Cambia la dirección de las columnas a vertical */
		height: auto; /* Ajusta la altura según el contenido */
	}

	.auth-left,
	.auth-right {
		flex: none;
		width: 100%; /* Asegura que ambas columnas ocupen todo el ancho */
		height: auto; /* Permite que ambas se adapten a su contenido */
	}

	.auth-left {
		order: -1;
		padding: 10px 20px;
		text-align: center;
	}

	.auth-footer {
		font-size: 12px;
		margin-top: 10px;
	}

	.auth-header .logo {
		max-width: 120px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.auth-layout {
		flex-direction: column; /* Sigue siendo vertical */
		height: auto;
	}

	.auth-left,
	.auth-right {
		width: 100%;
	}

	.auth-left {
		order: -1;
		flex-direction: column;
		text-align: center;
	}

	.auth-image {
		margin-bottom: 20px;
	}

	.auth-footer {
		font-size: 10px;
		margin-top: 10px;
	}

	.auth-content {
		width: 95%;
	}

	.auth-box {
		padding: 20px;
	}

	.auth-box button {
		padding: 8px 15px;
		font-size: 14px;
	}
}

.auth-full-content {
	display: grid;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: white;
	border-radius: inherit;
	padding: 2em;
}

.auth-box {
	background: #000b49;
	padding: 30px;
	border-radius: 10px;
	width: 100%;
}

.auth-header {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #0a2472;
}

.auth-body {
	width: 100%;
}

.auth-box a {
	color: #000b49;
	font-size: 14px;
}

.auth-box a:hover {
	color: #00f9ff;
}

.input-icon-container {
	position: relative;
}

.input-icon-container input {
	width: 100%;
	padding-right: 30px; /* Espacio para el ícono */
}

.input-icon-container i {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #aaa;
}