/**
 * Contenedor de la imagen ampliado al máximo
 *
 * @format
 */

.bg-login-image {
	padding: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	margin-right: -20px; /* Extiende más hacia la derecha */
	position: relative;
	width: calc(50% + 30px); /* Amplía el ancho base */
}

/* Contenedor del logo y texto integrado */
.logo-principal-div {
	width: 100%;
	height: 100%;
	position: relative; /* Para posicionar el texto dentro de la imagen */
	pointer-events: none;
}

/* Imagen ampliada al máximo */
.img-principal {
	width: 90%; /* Ocupa el 90% del contenedor */
	max-width: 450px; /* Tamaño máximo aumentado */
	height: auto;
	border: 3px solid #248cf5;
	border-radius: 10px;
	padding: 15px;
	background-color: white;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	display: block;
	margin: 0 auto;
	user-select: none; /* Evita que se pueda seleccionar */
	-webkit-user-drag: none; /* Evita arrastre en navegadores WebKit */
	touch-action: none; /* Desactiva gestos táctiles */
}

/* Texto "Calidad" integrado en la imagen */
.titulo-img {
	position: absolute;
	bottom: 30px; /* Posición desde abajo */
	left: 50%;
	transform: translateX(-50%);
	font-size: 2.5rem;
	font-weight: bold;
	color: white;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	background-color: rgba(36, 140, 245, 0.7); /* Fondo azul semitransparente */
	padding: 0.5rem 2rem;
	border-radius: 30px;
	width: max-content;
	max-width: 80%;
	text-align: center;
}

/* Ajuste para mantener la línea divisoria */
.div-cont-index .row::after {
	top: 30px;
	bottom: 30px;
	left: calc(50% + 15px); /* Ajuste por el agrandamiento */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background-color: #e3e6f0;
	transform: translateX(-50%);
}
.primary-cont {
	background-color: #0d6efd;
}
.btn-1 {
	background: #248cf5;
}
.btn-1:hover {
	box-shadow: 0 5px 15px rgba(22, 125, 228, 0.3);
	background: #1a7bd9;
}
@media (max-width: 767.98px) {
	/* Eliminar línea divisoria vertical */
	.div-cont-index .row::after {
		display: none;
	}

	/* Reordenar columnas: imagen primero */
	.div-cont-index .row {
		flex-direction: column;
	}

	/* Contenedor de la imagen */
	.bg-login-image {
		order: 1;
		margin: 0 auto !important;
		padding: 1rem !important;
		width: 100% !important;
		max-width: 300px !important;
		background-color: transparent !important;
		border: none !important;
		margin-top: 100px;
	}

	/* Ajustes para la imagen */
	.img-principal {
		width: 90% !important;
		max-width: 280px !important;
		margin: 0 auto 1rem !important;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
	}

	/* Contenedor del formulario */
	.div-cont-index .col-lg-6:last-child {
		order: 2;
		padding: 0 1.5rem !important;
	}

	/* Texto "Calidad" */
	.titulo-img {
		position: static !important;
		transform: none !important;
		margin: 1rem auto !important;
		width: 100% !important;
		font-size: 1.8rem;
		text-align: center;
		background-color: transparent !important;
		text-shadow: none;
		color: #248cf5 !important;
	}

	/* Alineación del título Bienvenidos */
	.card-body h4 {
		text-align: center !important;
		margin-top: 1rem !important;
	}
}
.contenedor-inicial {
	margin-top: 20%;
}

@media (max-width: 991.98px) {
	/* Cambiamos a 991.98px para que coincida con lg breakpoint */
	/* Eliminar línea divisoria vertical */
	.div-cont-index .row::after {
		display: none;
	}

	/* Reordenar columnas: imagen primero */
	.div-cont-index .row {
		flex-direction: column;
	}

	/* Contenedor de la imagen - ahora visible en móviles */
	.bg-login-image {
		order: 1;
		margin: 0 auto !important;
		padding: 2rem 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
		background-color: transparent !important;
		display: flex !important; /* Aseguramos que se muestre */
	}

	/* Ajustes para la imagen del logo */
	.img-principal {
		width: 80% !important;
		max-width: 250px !important;
		margin: 0 auto !important;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
	}

	/* Contenedor del formulario */
	.div-cont-index .col-lg-6:last-child {
		order: 2;
		padding: 0 1.5rem !important;
	}

	/* Ajustes para el contenedor principal */
	.card {
		margin-top: 1rem !important;
		margin-bottom: 1rem !important;
	}

	/* Ajuste del margen superior del contenedor inicial */
	.contenedor-inicial {
		margin-top: 15% !important;
	}
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 575.98px) {
	.img-principal {
		max-width: 200px !important;
	}

	.contenedor-inicial {
		margin-top: 5% !important;
	}
}