body {
	background-color: #212121;
}

/* 1. Estilo base para las tarjetas de la columna de filtros */
.col-sm-3 .card {
	background-color: #31363b; /* Mismo fondo que las tarjetas de producto */
	border-radius: 1rem; /* Mismos bordes redondeados */
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Misma sombra */
	border: none; /* Nos aseguramos que no tenga borde */
	overflow: hidden; /* Importante para que el contenido respete los bordes redondeados */
}

	/* 2. Ajuste para que la cabecera (Categorías, Marcas) respete los bordes redondeados */
	.col-sm-3 .card .card-header {
		background-color: #212121; /* Un tono un poco más oscuro para el header */
		border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria sutil */
	}

/* 3. Nos aseguramos que el cuerpo de la tarjeta no tenga su propio fondo */
#contenedor_categoria,
#contenedor_marca {
	background-color: transparent; /* Hacemos el fondo transparente */
	color: white; /* Mantenemos el texto blanco */
}

	/* 4. Mantenemos el texto de las etiquetas en blanco */
	#contenedor_categoria .form-check-label,
	#contenedor_marca .form-check-label {
		color: white;
	}





.tarjeta-horizontal {
	border-radius: 0.5rem; /* Bordes redondeados para la tarjeta */
	overflow: hidden; /* Asegura que la imagen se recorte si es necesario */
}

	.tarjeta-horizontal .card-img-left {
		width: 100%; /* La imagen ocupa todo el ancho de su columna */
		object-fit: cover; /* Recorta la imagen para que llene el espacio sin distorsionarse */
		border-top-left-radius: 0.5rem; /* Bordes redondeados para la imagen */
		border-bottom-left-radius: 0.5rem;
	}

	/* Ajustes para el cuerpo de la tarjeta si la imagen es el principal atractivo */
	.tarjeta-horizontal .card-body {
		padding: 1.5rem; /* Espaciado interno */
	}

#btnaplicarfiltro {
	background-color: #00BFD4; /* El color de fondo azul que quieres */
	color: white; /* Cambia el color del texto a blanco para que se lea bien */
	border-color: #00BFD4; /* Asegura que el borde sea del mismo color */
}

	/* Efecto opcional para cuando el usuario pasa el ratón por encima */
	#btnaplicarfiltro:hover {
		background-color: #1c86ee; /* Un tono de azul un poco más oscuro */
		border-color: #1c86ee;
	}

.navbar {
	background-color: #2b2b2b !important; /* Usamos !important para asegurar que sobreescriba a Bootstrap */
}

	/* Cambia el color del texto del logo ("Cúchau") y los enlaces */
	.navbar .navbar-brand,
	.navbar .nav-link {
		color: white !important;
	}

		/* Opcional: Cambia el color del texto de los enlaces al pasar el ratón */
		.navbar .nav-link:hover {
			color: #cccccc !important; /* Un gris claro para el efecto hover */
		}
/*Para el borde de los filtros*/
.col-sm-3 .card {
	border: none;
}

/*Más estilos para la tarjeta adicional*/
.tarjeta-horizontal {
	background-color: #31363b; /* Color de fondo un poco más claro que #2b2b2b */
	border-radius: 1rem; /* Bordes más redondeados (16px) */
	overflow: hidden; /* Sigue siendo importante para el radio */
	border: none; /* Asegurarse de que no haya bordes predeterminados */
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4); /* Sombra oscura más pronunciada */
}

	/* Mantén estos estilos para la imagen dentro de la tarjeta */
	.tarjeta-horizontal .card-img-left {
		width: 100%;
		object-fit: cover;
		/* Los border-radius de la imagen deben coincidir con los de la tarjeta */
		border-top-left-radius: 1rem; /* Coincide con el radio de la tarjeta */
		border-bottom-left-radius: 1rem; /* Coincide con el radio de la tarjeta */
	}

	/* Ajustes para el cuerpo de la tarjeta si la imagen es el principal atractivo */
	.tarjeta-horizontal .card-body {
		padding: 1.5rem; /* Espaciado interno */
	}

/*Para el boton agregar automovil*/
.agregarAutomovil {
	background-color: #00BFD4;
	color: white;
	border-color: #00BFD4;
}

	/* Efecto al pasar el ratón por encima */
	.agregarAutomovil:hover {
		background-color: #00a8bb; /* Un tono un poco más oscuro */
		border-color: #00a8bb;
		color: white;
	}

/*
		Estilo para los radio buttons NO seleccionados en los filtros
		*/
#contenedor_categoria .form-check-input:not(:checked),
#contenedor_marca .form-check-input:not(:checked) {
	background-color: #495057; /* Fondo gris para los no seleccionados */
	border-color: #6c757d; /* Un borde gris un poco más claro */
}


/* 1. Fondo del menú desplegable */
.dropdown-menu {
	background-color: #31363b;
	border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil para que se distinga */
}

	/* 2. Color del texto de los elementos del menú */
	.dropdown-menu .dropdown-item {
		color: white;
	}

		/* 3. Color al pasar el ratón por encima o seleccionar un elemento */
		.dropdown-menu .dropdown-item:hover,
		.dropdown-menu .dropdown-item:focus {
			background-color: #495057; /* Un gris un poco más claro */
			color: white;
		}

	/* 4. Color de la línea que separa las opciones */
	.dropdown-menu .dropdown-divider {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}


@keyframes square-animation {
	0% {
		left: 0;
		top: 0;
	}

	10.5% {
		left: 0;
		top: 0;
	}
	/* CAMBIO: 32px ahora es 24px */
	12.5% {
		left: 24px;
		top: 0;
	}

	23% {
		left: 24px;
		top: 0;
	}
	/* CAMBIO: 64px ahora es 48px */
	25% {
		left: 48px;
		top: 0;
	}

	35.5% {
		left: 48px;
		top: 0;
	}
	/* CAMBIO: 64px/32px ahora es 48px/24px */
	37.5% {
		left: 48px;
		top: 24px;
	}

	48% {
		left: 48px;
		top: 24px;
	}
	/* Y así sucesivamente para todos los valores... */
	50% {
		left: 24px;
		top: 24px;
	}

	60.5% {
		left: 24px;
		top: 24px;
	}

	62.5% {
		left: 24px;
		top: 48px;
	}

	73% {
		left: 24px;
		top: 48px;
	}

	75% {
		left: 0;
		top: 48px;
	}

	85.5% {
		left: 0;
		top: 48px;
	}

	87.5% {
		left: 0;
		top: 24px;
	}

	98% {
		left: 0;
		top: 24px;
	}

	100% {
		left: 0;
		top: 0;
	}
}



/* 1. Prepara el contenedor para el posicionamiento absoluto */
.position-relative {
	position: relative;
}

/* 2. Posiciona el loader en la esquina superior derecha */
.loader {
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(45deg);
}

.loader-square {
	position: absolute;
	top: 0;
	left: 0;
	/* CAMBIO: Los cuadrados individuales son más pequeños */
	width: 20px; /* Antes 28px */
	height: 20px; /* Antes 28px */
	margin: 2px;
	border-radius: 0px;
	background: white;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	animation: square-animation 10s ease-in-out infinite both;
}

	/* Los delays de la animación no necesitan cambiar */
	.loader-square:nth-of-type(1) {
		animation-delay: -1.4285714286s;
	}

	.loader-square:nth-of-type(2) {
		animation-delay: -2.8571428571s;
	}

	.loader-square:nth-of-type(3) {
		animation-delay: -4.2857142857s;
	}

	.loader-square:nth-of-type(4) {
		animation-delay: -5.7142857143s;
	}

	.loader-square:nth-of-type(5) {
		animation-delay: -7.1428571429s;
	}

	.loader-square:nth-of-type(6) {
		animation-delay: -8.5714285714s;
	}

	.loader-square:nth-of-type(7) {
		animation-delay: -10s;
	}





.shine-title-large {
	background: linear-gradient(to right, #9f9f9f 0, #fff 50%, #868686 100%);
	/* CAMBIO: Hacemos el fondo el doble de ancho que el texto */
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine-continuous 3s linear infinite; /* Usamos la nueva animación */

	font-size: 3.5rem;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
	white-space: nowrap;
}

/* CAMBIO: Nuevos keyframes para un movimiento fluido y sin pausas */
/* (Recuerda usar @@keyframes si esto está en un archivo .cshtml) */
@keyframes shine-continuous {
	to {
		/* Mueve el fondo el ancho completo del texto, creando un ciclo perfecto */
		background-position: -200%;
	}
}