html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	width: 100%;
	overflow-x: hidden; /* evita scroll horizontal */
	overflow-y: auto; /* permite scroll vertical de toda la página */
}

.container-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* Permite que se acomoden en columna si es necesario */
	min-height: 100vh;
	width: 100%;
	background: url("/pat/javax.faces.resource/images/loginGP/fondo.png.xhtml?ln=ultima-layout")
		no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	gap: 1rem;
	position: relative;
}

.left-panel {
	flex: 1.3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem 1rem 4rem;
}

.right-panel {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 4rem 1rem 2rem;
}

.carousel-wrapper {
	width: 100%;
	max-width: 850px;
}

.product-image {
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

.login-box {
	background: #fff0f7;
	color: #4a2c5b;
	width: 100%;
	max-width: 400px;
	min-height: 100px;
	padding: 2.5rem 2rem 2rem 2rem;
	border-radius: 1.5rem;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	text-align: center;
	position: relative;
}

.login-logo {
	width: 160px;
	margin-bottom: 2rem;
	margin-top: -1.5rem;
}

.login-field {
	margin-bottom: 1.5rem;
	text-align: left;
	width: 100%;
}

.login-field .ui-outputlabel {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 0.3rem;
	margin-left: 0.5rem;
	color: #633C85;
}

.input-icon {
	position: relative;
	display: flex;
	align-items: center;
	background-color: #e8d6f3;
	border-radius: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	margin-bottom: 1rem;
}

.input-icon i {
	position: absolute;
	left: 0.8rem;
	font-size: 1.2rem;
	color: #633C85;
}

.input-icon input {
	border: none;
	background: transparent;
	outline: none;
	width: 100%;
	color: #633C85;
	padding-left: 2rem;
}

.login-button {
	background-color: #633C85 !important;
	color: white !important;
	border: none !important;
	border-radius: 0.5rem !important;
	padding: 0.8rem 0.5rem !important;
	width: 260px !important;
	font-size: 1.5rem !important;
	font-weight: bold !important;
	cursor: pointer !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
	transition: background-color 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.login-links {
	font-size: 1rem;
	font-weight: bold;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	text-align: center;
}

.login-links a {
	color: #633C85;
	display: block;
	text-decoration: none;
	margin: 0.3rem 0;
}

.footer-global {
	position: absolute;
	bottom: 10px;
	left: 40px;
	width: 200px;
}

.toggle-eye {
	position: absolute;
	right: 3rem;
	top: 30%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #633C85;
	font-size: 1.2rem;
}

.login-messages {
	display: block;
	width: 100%;
	margin: 0rem 0rem 2.5rem !important;
	padding: 0.3rem;
	border-radius: 6px;
	background-color: #ffe6e6;
	border: 1px solid #ff9999;
	color: #990000;
	font-weight: bold;
	text-align: center;
}

.logout-messages {
	display: block;
	width: 100%;
	margin: 0rem 0rem 2.5rem !important;
	padding: 0.3rem;
	border-radius: 6px;
	background-color: #e0f7e9; /* verde suave */
	border: 1px solid #5cb85c;  /* borde verde */
	color: #2e7d32;             /* texto verde oscuro */
	font-weight: bold;
	text-align: center;
}




@media ( max-width : 1300px) {
	.container-flex {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 2rem 1rem;
		overflow-y: auto;
	}
	.right-panel {
		order: 1; /* Login primero */
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 1rem;
	}
	.left-panel {
		order: 2; /* Carrusel después */
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 1rem;
	}
	.login-box {
		background: #fff0f7;
		color: #4a2c5b;
		width: 100%;
		max-width: 400px; /* más estrecho si quieres */
		min-height: auto; /* solo el alto necesario */
		padding: 1.5rem; /* menos espacio interno */
		border-radius: 1.5rem;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
		text-align: center;
		position: relative;
		box-shadow: -14px 16px 19px 0px rgba(0,0,0,0.68);
		-webkit-box-shadow: -14px 16px 19px 0px rgba(0,0,0,0.68);
		-moz-box-shadow: -14px 16px 19px 0px rgba(0,0,0,0.68);
	}
	.login-logo {
		width: 120px;
		padding: 1rem;
		margin-bottom: -1rem;
		margin-top: -1.5rem;
	}
	.login-button {
		background-color: #633C85 !important;
		color: white !important;
		border: none !important;
		border-radius: 0.5rem !important;
		padding: 0.5rem 1rem !important;
		width: 245px !important;
		font-size: 1.5rem !important;
		font-weight: bold !important;
		cursor: pointer !important;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
		transition: background-color 0.3s ease !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		margin-top: 1rem !important;
		margin-bottom: 1rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.footer-global {
		position: absolute;
		bottom: 60px;
		left: 40px;
		width: 200px;
	}
	.carousel-wrapper {
		width: 100%;
		max-width: 600px;
		box-shadow: -14px 16px 19px 0px rgba(0,0,0,0.68);
		-webkit-box-shadow: -14px 16px 19px 0px rgba(0,0,0,0.68);
		-moz-box-shadow: -14px 16px 19px 0px rgba(0,0,0,0.68);
	}
}