body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.page-color {
	background-color: #e71b33;
}

.nav-card {
	transition: background-color 0.3s ease-out, color 0.3s ease-out,
		border-color 0.3s ease-out;
}

.fa-house-user,
p {
	transition: color 0.3s ease-out;
}

/* Estilos para la tarjeta activa */
.active-card i,
.active-card p {
	color: #ffffff;
}

.active-card {
	background-color: #e71b33;
}

/* Estilo de contenedor de la tarjeta */
.tarjeta-propiedad-container {
	position: relative;
	display: flex;
	flex-direction: column; /* Asegura que las tarjetas se coloquen en columna */
	align-items: stretch; /* Asegura que las tarjetas ocupen todo el ancho disponible */
	width: 100%; /* Asegura que el contenedor ocupe el ancho completo */
}

/* Estilos para la tarjeta */
.tarjeta-propiedad {
	position: relative;
	background-color: white;
	margin: 10px 0; /* Margen vertical para separar las tarjetas */
	padding: 1rem; /* Padding interior */
	z-index: 1;
	width: 100%; /* Ocupa el 100% del contenedor */
	border: 1px solid rgb(207, 207, 207);
	border-left: none; /* Se elimina el borde izquierdo ya que se usa el borde con la clase .borde-tarjeta */
	border-radius: 0 10px 10px 0; /* Bordes redondeados a la derecha */
	box-sizing: border-box; /* Asegura que el padding y el border no afecten el ancho total */
}

/* Borde izquierdo de la tarjeta */
.borde-tarjeta {
	width: 10px;
	background-color: #e62238;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 5px 0 0 5px; /* Bordes redondeados a la izquierda */
	z-index: 2; /* Asegúrate de que el borde esté encima del contenido */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
	.menu-option {
		margin: 0;
		border-radius: 0;
	}
}

@media (max-width: 576px) {
	.tarjeta-propiedad-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.tarjeta-propiedad {
		padding: 10px; /* Ajustar el padding para pantallas pequeñas */
		margin: 5px 10px; /* Margen para ajustar el espacio en pantallas pequeñas */
		border-radius: 0; /* Eliminar bordes redondeados en pantallas pequeñas */
		max-height: none; /* Eliminar la restricción de altura */
		height: auto; /* Asegura que la altura sea automática */
	}
}

#preloader {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999; /*  para asegurar que se superponga al contenido */
}

#preloader-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 1); /* Fondo blanco */
	z-index: 9999; /* Se superpone a todo el contenido */
	display: flex;
	justify-content: center;
	align-items: center;
}

#preloader-gif {
	max-width: 200px; /* Tamaño del GIF */
	max-height: 200px;
}

.table-responsive {
	font-size: 16px;
}

@media (max-width: 768px) {
	.table-responsive {
		font-size: 10px;
	}

	.table-responsive th,
	.table-responsive td {
		padding: 8px;
	}

	.table-responsive table {
		width: 100%;
	}
}

.offcanvas-large {
	width: 100vw !important;
}

@media (min-width: 768px) {
	.offcanvas-large {
		width: 75% !important;
	}
}

@media (min-width: 1200px) {
	.offcanvas-large {
		width: 50% !important;
	}
}

/*Cambiar aspecto de inputs numericos*/
input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

@media (max-width: 576px) {
	th,
	td {
		font-size: 12px; /* Texto más pequeño en móviles */
	}

	#btnEditarPropiedadGuardada {
		padding: 4px 8px; /* Botón más compacto */
	}
}

/* Ajuste de altura para que las imágenes ocupen todo el área del modal */
.carousel-inner img {
	max-height: 70vh; /* Ajuste máximo en altura para la imagen */
	object-fit: cover; /* Ajuste de escalado para llenar el contenedor */
}