body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.login-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://plataforma.avivamiento.com/images/Fondos/GlobeBackground.png');
	background-size: cover;
	background-position: center;
	z-index: -1;
}

/* Container for branding and cards */
.main-content-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	justify-content: flex-end;
	padding-bottom: 50px;
	text-align: center;
}

/* Branding Section */
.branding-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	flex-grow: 1;
	justify-content: flex-end;
	margin-bottom: 10px;
	/* Smooth transition when the hidden card appears */
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.main-brand-img {
	width: auto;
	max-width: 1600px;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	filter: drop-shadow(0 20px 50px rgba(0,0,0,0.9));
	z-index: 1;
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Fixed container to prevent browser-side "zooming" or scaling logic */
.logo-fixed-container {
	width: 350px;
	min-width: 350px;
	max-width: 350px;
	margin-top: -110px;
	margin-bottom: 50px;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo-text-img {
	width: 100% !important;
	height: auto !important;
	display: block;
	opacity: 0.95;
	/* Force hardware acceleration to stop sub-pixel scaling issues */
	transform: translateZ(0);
	backface-visibility: hidden;
	image-rendering: -webkit-optimize-contrast;
	object-fit: contain;
}


/*.logo-text-img {
	display: block;
	width: 350px !important;
	min-width: 350px !important;
	max-width: 350px !important;
	height: auto;
	margin-top: 0px;
	object-fit: contain;
	z-index: 2;
	opacity: 1;*/
	/* Disabling scaling transitions for this specific element to keep it stable */
	/*transition: opacity 0.8s ease, margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}*/

/* Column layout to stack cards vertically */
.card-stack-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-bottom: 0px;
	z-index: 3;
}

.blue-animated-border-card {
	position: relative;
	padding: 2px;
	background: linear-gradient(45deg, #001f3f, #0074D9, #7FDBFF, #001f3f);
	background-size: 400% 400%;
	animation: gradient-animation 6s ease infinite;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.green-animated-border-card {
	position: relative;
	padding: 2px;
	background: linear-gradient(45deg, #001f3f, #0074D9, #7FDBFF, #001f3f);
	background-size: 400% 400%;
	animation: gradient-animation 6s ease infinite;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.card-inner {
	background: white;
	border-radius: 11px;
}

#hiddenCard {
	display: none;
	opacity: 0;
	/*width: 650px;*/
	border-radius: 14px;
	border: none;
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.reveal-card {
	display: block !important;
	animation: slideInDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideInDown {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 768px) {
	.main-brand-img {
		max-width: 130vw;
		width: 130vw;
		max-height: 50vh;
	}
/*
	.logo-text-img {
		margin-top: 0px;
	}*/

	.card-inner {
		padding: 10px 20px;
	}
}

@media (max-width: 480px) {
	.main-brand-img {
		width: 150vw;
		max-width: 150vw;
		max-height: 45vh;
	}

	#userInput, #passInput {
		width: 100%;
	}

	#loginForm {
		flex-direction: column;
		width: 100%;
	}

		#loginForm .col-auto {
			width: 100%;
		}
}