@import url(genesis.css);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

body, html {
	height: 100%;
}

.container {
	display: flex;
	height: 100vh;
	overflow: hidden;
}

/* Sección de la imagen */
.image-section {
	flex: 1;
	background-color: #fff; /* Color de fondo por si no carga la imagen */
}

.image-section img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sección del login */
.login-section {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--genesis-background-login); /* Fondo oscuro para contraste */
	color: #fff;
}

.login-box {
	width: 80%;
	max-width: 400px;
	padding: 20px;
	background: var(--genesis-secondary-color);
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-box h2 {
	margin-bottom: 20px;
	text-align: center;
}

.login-box label {
	display: block;
	margin: 10px 0 5px;
	font-size: 14px;
}

.login-box input {
	width: 100%;
	padding: 10px;
	/* margin-bottom: 15px; */
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
}

.login-box input:focus {
	outline: none;
	border-color: #ffd100;
	box-shadow: 0 0 5px #ffd100;
}

.login-box button {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	background-color: var(--genesis-btn-tertiary-background-color);
	border: none;
	border-radius: 5px;
	color: var(--genesis-btn-tertiary-color);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.login-box button:hover {
	background-color: var(--genesis-btn-tertiary-background-color-hover);
	color: var(--genesis-btn-tertiary-color-hover);
}

/* Mensajes de error y éxito */
#user_message {
	display: none;
	padding: 10px;
	margin: 10px 0 0 0;
	border-radius: 5px;
	margin-top: 10px;
	font-size: 14px;
}

.bg-success {
	background-color: #28a745;
}

.bg-warning {
	background-color: #ffc107;
}

.bg-danger {
	background-color: #dc3545;
}

.text-white {
	color: white;
}

/* Estilo para el estado de los inputs al recibir focus */
input:focus, button:focus {
	outline: none;
}

/* Animación para la clase 'tiembla' */
.tiembla {
	-webkit-animation: tiembla 0.1s;
	animation: tiembla 0.1s;
}

@keyframes tiembla {
	0% {
		transform: rotateZ(-5deg);
	}

	50% {
		transform: rotateZ(0deg) scale(0.8);
	}

	100% {
		transform: rotateZ(5deg);
	}
}

/* Responsive Styles */
@media (max-width: 768px) {
	.container {
		flex-direction: column;
	}

	.image-section {
		height: 40%;
	}

	.login-section {
		height: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-box {
		width: 90%;
	}
}

@media (max-width: 480px) {
	.login-box {
		padding: 15px;
		font-size: 14px;
	}

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

.disabled {
	cursor: not-allowed;
	opacity: 0.6;
	background-color: #eba6a6; /* Color de fondo para mostrar que está deshabilitado */
	color: #ffffff; /* Color de texto más claro */
}

/* Evitar cambios de color al hacer hover sobre un elemento deshabilitado */
.disabled:hover {
	background-color: #db9797;
}

/* Estilo para los botones deshabilitados */
button:disabled, button.disabled {
	cursor: not-allowed;
	opacity: 0.6;
}