/* Reset básico */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	padding-top: 60px; /* Altura del header para evitar que el contenido quede debajo */
	font-family: Arial, sans-serif;
	background: transparent !important;
}

/* Estilo del header fijo */
#barraMenuArriba {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 50px !important;
	background-color: #1a1a1a;
	color: white;
	z-index: 9999999 !important;
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 0 60px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Estilos para los elementos internos */

.icon-hover {
	color: white;
	text-decoration: none;
	font-size: 20px;
	transition: transform 0.2s ease, font-size 0.2s ease;
}

.icon-hover:hover {
	transform: scale(1.1);
	font-size: 22px;
}

/* Contenedor de iconos */
#menuLogos {
	display: flex;
	gap: 15px;
}


/* Media query para dispositivos con un ancho entre 350px y 1200px */
@media screen and (min-width: 350px) and (max-width: 1200px) {
    /* Ajuste del contenedor principal */
    /* html, body {
		color: black;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important; /* Evita el scroll horizontal */
        /* box-sizing: border-box; */
    /* } */
.icon-hover:hover {
  transform: scale(1.2);
  transition: all 0.2s ease;
}

.toast {
  visibility: hidden; /* Oculto por defecto */
  min-width: 200px;
  background-color: #2df434;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 12px;
  position: fixed;
  left: 50%;
  top: 230px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  font-family: sans-serif;
  font-size: 1.2rem;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  z-index: 99999!important;
}

.toast.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

	  /* Clase que aplica fondo transparente */
  .transparent-bg {
    background: none !important;
    background-color: transparent !important;
  }


    .moon-link{
        display: none !important;
    }
    
    
    #logo {
        margin: 0 auto !important;
        height: 70% !important;
        width: auto !important;
    }
    
    #carriToxico a, #corneta, #chekUser a {
        display: none !important; /* Oculta elementos en dispositivos móviles */
        margin: 0 !important;
        padding: 0 !important;
    }

    #nombreUserArriba {
        width: 250px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none; /* Oculta en dispositivos móviles */
    }


    #buscador5445, #butonMenu9898 {
        margin: 0 1rem !important;
        padding: 0 !important;
    }

    #duenoEcom22 {
        display: none; /* Oculta en dispositivos móviles */
    }
    
    #buscarProductoInputTOL {
        width: 110px !important;
    }
    

    #modalActiveLabel{
        margin: 3rem auto auto auto !important;
    }
}



/* Ajustes para el ancho del offcanvas */
@media (min-width: 992px) {
	#offcanvasExample {
		width: 42vw !important; /* Ocupará el 50% del viewport en pantallas grandes */
		max-width: 42vw !important;
	}
}

@media (max-width: 991px) {
	#offcanvasExample {
		width: 100vw !important; /* Ocupará el 100% del viewport en dispositivos móviles */
		max-width: 100vw !important;
	}
}
		/* <!-- lunita --> */

			/* Estilos de la luna */
			.moon {
				width: 30px;
				height: 30px;
				background-color: #f8d085;
				border-radius: 50%;
				border: 0.1px solid #333;
				transition: background-color 0.3s ease, opacity 1s linear;
				animation: shine 4s infinite;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.moon:hover {
				background-color: #ffd700;
			}

			.moon:active {
				background-color: orange;
			}

			@keyframes moonEntrance {
				0% { top: -60px; }
				100% { top: 100px; }
			}

			@keyframes shine {
				0% { opacity: 0.05; }
				10% { opacity: 0.1; }
				20% { opacity: 0.2; }
				30% { opacity: 0.3; }
				40% { opacity: 0.4; }
				50% { opacity: 0.5; }
				60% { opacity: 0.6; }
				70% { opacity: 0.7; }
				80% { opacity: 0.8; }
				90% { opacity: 0.9; }
				100% { opacity: 1; }
			}

		.elemento {
			position: fixed;
			bottom: 150px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 999 !important;
			animation: moonEntrance 2s ease-in-out 1;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}

			/* Redes sociales fijadas al fondo */
			#savedlinks989 {
				position: relative !important;
				bottom: 2rem !important;
				left: 0 !important;
				width: 100% !important;
				z-index: 9999999 !important;
				margin: 0 !important;
				display: flex !important;
				justify-content: center !important;
			}

                /* Estilo para mostrar los íconos en línea */
                .list-inline {
                    display: flex;
                    justify-content: center; /* Centrar los íconos horizontalmente */
                    gap: 1rem; /* Espacio entre los íconos */
                    padding: 0; /* Eliminar el padding predeterminado de la lista */
                    margin: 0; /* Eliminar el margen predeterminado de la lista */
                }

                .list-inline-item {
                    list-style: none; /* Eliminar los puntos de la lista */
                    transition: transform 0.3s ease-in-out; /* Transición suave */
                }

                .list-inline-item:hover {
                    transform: scale(1.05); /* Escala del 105% al hacer hover */
                }

                .social-link {
                    text-decoration: none !important; /* Eliminar subrayado de los enlaces */
                    color: inherit !important; /* Heredar el color del ícono */
                }

                .social-icon {
                    font-size: 3em; /* Tamaño de los íconos */
                }



			.list-inline-item {
				transition: transform 0.3s ease-in-out;
			}

			.list-inline-item:hover {
				transform: scale(1.05);
			}






#botonaso {
	background: transparent !important;
	font-size: 1.3rem !important;
	font-weight: 500;
	text-align: left;
	transition: color 0.8s, font-size 0.5s;
	margin: 0.81rem auto 0.5rem -0.51rem !important;
	/* border-bottom: 0.1rem solid blue !important; */
}

#botonaso:hover {
	color: lightgreen !important;
	font-size: 1.5rem !important; /* 3% más que 1.3rem */
	transition: color 0.8s, font-size 0.8s;
}


#accordionFlushExample .botonaso.active,
#accordionFlushExample .botonaso:focus {
    color: orange;
    font-size: 1.1rem;
    color: white !important; /* Este estilo está sobrescribiendo el anterior, lo que puede no ser lo que deseas */
}

/* Tamaño general de la escarapela */
.escarapela {
    width: 75px; /* Tamaño de la escarapela */
    height: 75px; /* Tamaño de la escarapela */
    position: relative;
    margin: 0 0 0 2rem;
    animation: latir 2s infinite; /* Animación de latido */
}

/* Capas de la escarapela */
.capa {
    position: absolute;
    border-radius: 50%;
    top: 30%;
    left: 30%;
    transform: translate(-50%, -50%);
}

/* Capas de la escarapela */
.capa1 {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
}

.capa2 {
    width: 80%;
    height: 80%;
    background-color: lightgreen;
}

.capa3 {
    width: 60%;
    height: 60%;
    background-color: lightgreen;
}

.textoE {
    position: relative;
    font-size: 1rem;
    top: 25px !important; /* Centrar verticalmente */
    left: 20px !important; /* Centrar horizontalmente */
    transform: translate(-50%, -50%); /* Ajustar el centro */
    color: white;
    text-align: center;
    z-index: 1;
    width: 80%; /* Asegura que el texto se mantenga dentro de los bordes */
    padding: 2px 0; /* Espacio vertical para que no toque los bordes */
    overflow: hidden; /* Oculta cualquier parte del texto que sobresalga */
}

@keyframes latir {
    0%, 100% {
        transform: scale(1) rotate(-45deg);
    }
    50% {
        transform: scale(1.1) rotate(-45deg);
    }
}

/* Corazón */
.corazon {
    padding: 0.5rem;
    width: 45px; /* Tamaño reducido */
    height: 45px; /* Tamaño reducido */
    background-color: red;
    position: relative;
    transform: rotate(-45deg); /* Sin !important */
    animation: latir 1s infinite; /* Mantener aquí la animación */
    margin: 0 0 0 2rem;
}

.corazon::before,
.corazon::after {
    content: '';
    width: 45px; /* Tamaño reducido */
    height: 45px; /* Tamaño reducido */
    background-color: red;
    border-radius: 50%;
    position: absolute;
}

.corazon::before {
    top: -25px; /* Ajustado para la mitad */
    left: 0;
}

.corazon::after {
    left: 25px; /* Ajustado para la mitad */
    top: 0;
}

.textoC {
    font-size: 1rem;
    padding: 0.5rem;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%); /* Inclinación del texto */
    color: white; /* Color del texto */
    text-align: center; /* Centra el texto */
    z-index: 1; /* Asegura que el texto esté delante del corazón */
}
					
						.cardH-body {
							margin: 0px !important;
							padding: 0!important;
							width: 150px !important;
							flex: 1;
							order: 2; /* Contenido a la derecha */
						}
					
						.product-name {
							padding: 5px;
							font-size: 1.25rem;
							font-weight: bold;
						}
					
						.price-info {
							font-size: 1.125rem;
							font-weight: bold;
							margin: 10px 0;
						}
					
						.product-quantity {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					
						.product-quantity p {
							margin-bottom: 0;
							margin-right: 5px;
						}
					
						.product-quantity input {
							width: 35px;
							margin: 2px 5px;
						}

		.cardPromo {
							height: auto !important;
							width: auto; /* Ajusta el ancho según el espacio disponible */
							display: inline-flex; /* Permite que las tarjetas se alineen horizontalmente */
							background-color: transparent;
							justify-content: center; /* Alinea el contenido de la tarjeta en el centro */
							margin: 10px; /* Ajusta el margen alrededor de cada tarjeta */
							padding: 5px;
							box-sizing: border-box; /* Incluye el padding y borde en el tamaño total del elemento */
						}
						.cardP-body {
							margin: 2px !important;
							padding: 0!important;
							width: 100% !important;
							flex: 1;
							order: 2; /* Contenido a la derecha */
						}
            
	/* <!-- opciones de estilos a eleccion del owner del Ecommerce --> */

	.blueMarket {
		background: linear-gradient(to bottom right, #84e0f0, #0072bb) !important;
		color: white !important;		
	}
	.greenMarket {
		background: linear-gradient(to bottom right, #b4f5cc, #34db53) !important;
		color: white !important;		
	}

	.blackMarket {
		background: linear-gradient(to bottom right, #000000, #000000) !important;
		color: white !important; 
	}
	
	.silverMarket {
		background: linear-gradient(to bottom right, #c0c0c0, #585757) !important;
		color: black !important;		

	}
	.goldMarket {
		background: linear-gradient(to bottom right, #ffd700, #584b00) !important;
		color: white !important;		
	}
	.redMarket {
		background: linear-gradient(to bottom right, #f4a2a2, #ff0000) !important;
		color: white !important;
	}


		.eleganceTech {
	background: linear-gradient(to bottom right, #2c3e50, #4ca1af) !important;
	color: white !important;
	border: none !important;
}
.eleganceNeutral {
	background: linear-gradient(to bottom right, #f5f7fa, #c3cfe2) !important;
	color: #333 !important;
	border: none !important;
}

.elegancePremi {
	background: linear-gradient(to bottom right, #e8cbc0, #636fa4) !important;
	color: white !important;
	border: none !important;
}

.eleganceBlack {
	background: linear-gradient(to bottom right, #434343, #000000) !important;
	color: #f1c40f !important;
	border: none !important;
}


.elegance-blanco-plata {
	background: linear-gradient(to bottom right, #ffffff, #dfe6e9) !important;
	color: #2d3436 !important; /* gris oscuro para texto */
	border: none !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.elegance-dorado-chocolate {
	background: linear-gradient(to bottom right, #d4af37, #4e342e) !important;
	color: #fff8e1 !important; /* blanco cálido o marfil para contraste */
	border: none !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}



.elegance {
		background: linear-gradient(to bottom right, #f2f2bb, #653512) !important;
		border: none !important;
		color: white !important;
	}


	.coffe {
		background: linear-gradient(to bottom right, #f2f2bb, #653512) !important;
		border: none !important;
		color: white !important;
	}
	.pearl {
		background: linear-gradient(to bottom right, #f2f2ef, #ff69b4) !important;
		border: none !important;
		color: white !important;		
	}
	.coral {
		background: linear-gradient(to bottom right, #e3b2f1, coral) !important;
		border: none !important;
		color: white !important;		
	}
	
	.silver {
		background: linear-gradient(to bottom right, rgb(192, 192, 192), rgb(96, 95, 95)) !important;
		border: none !important;
		color: black !important;		
	}
	
	.cobre {
		background: linear-gradient(to bottom right, #b87333, rgb(184, 115, 51));
		border: none !important;
		color: white !important;		
	}
	
	.white {
		color: black !important;
		background: linear-gradient(to bottom right, white, rgb(238, 238, 238)) !important;
		border: none !important;
	}

	.zoom-img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.zoom-lens {
  transition: transform 0.05s ease;
}

.custom-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.custom-collapse.open {
    max-height: 500px; /* Ajusta según sea necesario */
}

.card-producto {
  margin: 1rem 0.3rem !important;
  background-color: transparent !important;
  border: 3px solid #ccc !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}