html {
	height: 10px;
	position: relative;
	overflow-x: hidden;
}
/* #products{
	color:rgb(119, 119, 119);
	font-size: 14px;
} */
body{
	font-family: "Roboto", sans-serif;
	  font-weight: 300;
	  font-style: normal;
}
strong{
	font-weight: 600;
}

#precio{
	font-weight: bold;
}
.icons{
	font-size: 13px;
	margin-left:2px;
}
.descarga{
	margin-left:7px;
}
.descarga2{
	margin-right:5px;
}
#mensaje-info{
	display: none;
	background-color: #FFF0A7;
	padding: 10px;
	margin: 10px 0;
	position: relative;
	border-radius: 20px;
}
#cerrar-mensaje{
	position: absolute;
    top: 4px;
    right: 10px;
    background: none;
    border: none;
    font-size: 27px;
    cursor: pointer;
}
.delete-button{
	height: 25px;
}
/* PAGINACION */
.pagination {
	/* margin-top: 5px; */
	margin-bottom: 10px;
	/* position: absolute; */
	text-align: center;
	/* bottom: 0; */
	right: 50%;
	/* top:400; */
}

/* #btnPrev{
	bottom: 0%;
}
#btnNext{
	bottom: 0%;
} */
/* STICKY NAVBAR */
#cargando{
	text-align: center;
}
#navbar {
	background-color: white;
}

/* .sticky {
	position: fixed;
	top: 0;
	width: 80%;
} */

.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: red;
	color: white;
	border: none;
	font-size: 24px;
	cursor: pointer;
	z-index: 100; /* Asegura que esté por encima del video */
  }
  
  .close-btn:hover {
	background-color: darkred;
  }
.icono_busqueda {
	padding-right: 7px;
	/*margin-bottom: 7px;*/
}

/* .result>p, .result>a{
	font-size:15px;
	line-height: 10px;
}
.result{

	margin-top:30px;
	margin-left:30px;
	font-family:'Hedvig Letters Sans', sans-serif;
} */


.sidebar {
	margin-left: 10px;
	width: 30%;
	height: 1000px;
	float: left;
	/*border: 1px solid green;*/
}

.clearfix {
	float: none;
	clear: both;
}

.titulo {
	/*text-align:center;*/
	color: #BCBCBC;
}
@media(min-width:1024px){
	#mensaje-info{
		width:60%;
	}
	#products {
		width: 55%;
		height: 100%;
		line-height: 16px;
		/*border: 1px solid black;*/
		/* float:left; */
	}
	#caja{
		width:40% !important;
	}
	#buscar{
		width:18% !important;
		max-width:141px !important;
	}
	#option:hover {
		color: black;
		border: 1px solid #4D51FC;
		border-color: #4D51FC;
		background: #FFFFFF;
		transition-duration: 1s;
	}
	.delete-button:hover {
		background-color: #FF1A1A;
	}
	.flecha:hover {
		background-color: #0056b3;
		transition: all 0.5s;
	}
	#buscar:hover {
		color: black;
		border: 1px solid #4D51FC;
		border-color: #4D51FC;
		background: #FFFFFF;
		transition-duration: 1s;
	}
	#btnPrev:hover {
		color: black;
		border: 1px solid #4D51FC;
		border-color: #4D51FC;
		background: #FFFFFF;
		transition-duration: 1s;
	}
	#btnNext:hover {
		color: black;
		border: 1px solid #4D51FC;
		border-color: #4D51FC;
		background: #FFFFFF;
		transition-duration: 1s;

	}
	.suggestion-item:hover {
		background-color: #4D8DC6;
		color: white;
	}
}

@media (max-width:1024px) {
	#products{
		width:100%;
	}
	#caja{
		width:52% !important;
	}
	#buscar{
		width:26% !important;
	}
	#suggestions{
		width: 50% !important;
	}

	/* #buscar {
		width: 150px !important;
	} */
	.nav {
		display: flex;
	}
	#form_search {
		margin-top: 50px !important;
		margin-left: 40px !important;
	}
}
.flecha {
    position: fixed;
    bottom: 20px;
    right: 50%;
    width: 50px;
    height: 50px;
    background-color: #4D8DC6;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    text-decoration: none;
	display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s;
}


	/* body {
		margin-left: 200px;
		margin-right: 200px;
	} */
	 header{
		margin-left: 200px;
		margin-right: 200px;
	 }
	 .contenedor{
		margin-left: 200px;
		margin-right: 200px;
	 }

	.nav {
		margin: 10px;
		/* padding: 15px; */
	}

	#buscar {
		width: 30%;
		padding: 10px;


	}

	#form_search {
		/* max-width: 700px;*/
		/*margin: 0 auto;*/

		justify-content: center;
		align-items: center;
		margin-top: 30px;
	}

/* @media (min-width:941x) {
	#buscar {
		width: 80px;
	}
} */
/* @media (max-width:431x) {
	#buscar {
		width: 80px;
	}
} */
 @media(min-width:1156px){
	.navbar{
		display:block !important;
	}
 }
 @media(max-width:1155px){
	.submenu {
		margin-top: 15px;
		position:static !important;
		display: block !important;
		background-color: rgb(246,246,246);
		padding: 0;
	}
	.navbar{
		display:none;
	}
	#menu2{
		margin-left:6px;
		font-size: 20px;
		display:block !important;
	}
	#menu>li{
		display:block !important;
		
	}
	#menu>li>a{
		display:block !important;
		
	}
 }
 @media(max-width:520px){
	.redes li{
		display:inline-block;
		margin-right:10px;
	}
 }
@media (max-width:428px){
	html{
		max-width: 428px;
	}
}
@media (max-width:545px) {
	#search-icon {
		display: none
	}
}

@media(max-width:1440px) {
	/* body {
		margin-left: 20px;
		margin-right: 20px;
	} */
	header{
		margin-left: 20px;
		margin-right: 20px;
	}
	.contenedor{
		margin-left: 20px;
		margin-right: 20px;
	}
	#buscar{
		width:80px;
	}
}
@media(max-width:476px){
	#buscar{
		width:36px !important;
	}
	#texto_busqueda{
		display: none;
	}
	#search-icon{
		display:block;
	}
}
@media (max-width:768px){
	#flecha{
		display:none !important;
	}
	#buscar{
		width:114px;
	}
}
	.navbar-brand {
		height: 112px;
		width: 183px;
		margin-right: 50px;
		/* margin:0 auto; */
	}

	#caja {
		padding-inline: 10px;
		width: 55%;
		height: 40px;
		margin: 5px;
		font-size: 17px;
		font-family: Verdana, Helvetica;
		/* border-radius: 6px; */
		border: 1px solid #afb0b2;
	}
	#caja:hover{
		border:1px solid #94bee3;
		transition: 0.2s;
	}
	#caja:focus{
		outline:none;
		border:1px solid #4D8DC6;
		transition: 0.2s;

	}
	#suggestions{
		/* padding-inline: 10px; */
		width: 40%;
		/* height: 41px; */
		margin-left: 5px;
		margin-right: 5px;
		font-size: 17px;
		font-family: Verdana, Helvetica;
		border-radius: 6px;
		border: 1px solid #747577;
	}
	.suggestion-item {
		display: flex; 
		justify-content: space-between;
		padding: 10px;
		cursor: pointer;
	}
	
	.delete-button {
		margin-left: auto;
		padding: 5px;
		background-color: #FF4D4D;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	
	
	
	.suggestion-item.selected {
		background-color: #4D8DC6;
		color: white;
	}

	

	#buscar {
		margin-left: -7px;
		font-size: 19px;
		color: white;
		width: 8%;
		padding: 10px;
		border: none;
		background: #4D8DC6;
		box-shadow: 2px solid grey;
		cursor: pointer;
		height: 45px;
		/* border-radius: 20px; */
		min-width: 36px !important;

	}

	

	#btnPrev {

		font-size: 12px;
		color: white;
		/* width:20px; */
		padding: 8px;
		border: none;
		background: #4D8DC6;
		box-shadow: 2px solid grey;
		cursor: pointer;
		display: none;
		border-radius: 20px;

	}

	

	#btnNext {

		font-size: 12px;
		color: white;
		/* width:20px; */
		padding: 8px;
		border: none;
		background: #4D8DC6;
		box-shadow: 2px solid grey;
		cursor: pointer;
		display: none;
		border-radius: 20px;


	}

	

#video{
	max-width: 320px;
	height: auto;
	margin-top:25px;
}
.result {
	display: none;
}
#result{
	display:none;
}

#search-icon {
	padding-right: 5px;
}

/* #ean{
	line-height: 1px;
} */
#products>p {
	line-height: 17px;
}
#fecha-icon {
	padding-right: 3px;
}

#info {
	padding-right: 3px;
}

#nomext-icon {
	padding-right: 3px;
}

#option {
	margin-left: -2px;
	font-size: 18px;
	color: white;
	width: 15px;
	padding: 10px;
	border: none;
	background: #4D8DC6;
	box-shadow: 2px solid grey;
	cursor: pointer;
	/* border-radius: 15px; */
	height: 45px;
	min-width: 20px;
}



#caja-boton {
	height: 100px;
	font-size: 17px;
	color: white;
	width: 200px;
	border: none;
	background: #4D8DC6;
	box-shadow: 2px solid grey;
	border-radius: 17px;
}
.result{
	margin-bottom: 13px;
	margin-top: 5px;
}
.pages{
	margin-top:8px;
	font-weight:500;
	/* /* margin-left:40px; */
	margin-right:70px;
}


.suggestions {
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    display: none; /* Ocultamos por defecto */
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
}


#startScan{
		margin-left: -2px;
		font-size: 19px;
		color: white;
		width: 10%px;
		padding: 10px;
		border: none;
		background: #4D8DC6;
		box-shadow: 2px solid grey;
		cursor: pointer;
		/* border-radius: 20px; */
		height: 45px;
}
/* .foco {
	position: absolute;
    top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(99, 98, 99, 0.183); 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    display: none; 
    pointer-events: none; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  } */

  #indicador_ean{
	font-weight: 600;
	color:white;
  }
  .video-container {
    position: relative; /* Contenedor relativo */
    width: 100%; /* Ajustar al ancho */
    height: auto; /* Altura dinámica basada en el video */
  }

  #video {
    width: 100%; /* Ajuste al contenedor */
    height: auto;
  }

/* .barras {
    position: absolute;
    top: 50%;
    width: 6px; 
    height: 80px; 
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(99, 98, 99, 0.5)); 
    border-radius: 5px; 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 10px rgba(99, 98, 99, 0.5); 
    display: none; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease; 
}

#barra-izquierda {
    left: 20%; 
    transform: translateY(-50%);
}

#barra-derecha {
    right: 20%; 
    transform: translateY(-50%);
}


.barras.detectado {
    background: linear-gradient(180deg, rgba(0, 255, 0, 0.5), rgba(0, 150, 0, 0.8)); 
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 150, 0, 0.5); 
} */
#laser {
    position: absolute;
    width: 50%; /* Reducir el ancho para que sea más compacto */
    height: 4px; /* Grosor del láser */
    background: rgba(255, 0, 0, 0.8); /* Rojo semitransparente */
    top: 0%; /* Comienza en la parte superior */
    left: 25%; /* Centrar horizontalmente en el video */
    display: none; /* Oculta por defecto */
    animation: bajarLaser 1.5s infinite; /* Movimiento continuo hacia abajo */
  }

  /* Clase que se activa al detectar el código */
  .detectado {
    background: green !important; /* Cambia el láser a verde */
    animation: none; /* Detiene la animación */
  }

  /* Animación del láser: de arriba hacia abajo */
  @keyframes bajarLaser {
    0% {
      top: 40%; /* Comienzo arriba */
    }
    100% {
      top: 60%; /* Final abajo */
    }
  }
/* SLIDER */
/* .slider {
	position: relative;
	width: 468px;
	height: 117px;
	margin: auto;
	overflow: hidden;
} */
.slides-container {
	display: flex;
	transition: transform 0.5s ease;
	width: 100%;
}
.slide {
	min-width: 100%;
	box-sizing: border-box;
}
.slide img {
	width: 100%;
	display: block;
}
/* MENU */
.help{
	margin-right:5px;
}
.navbar{
	border-top:1px solid #e9e9e9;
	border-bottom:1px solid #e9e9e9;
	margin-bottom:10px;
	background-color: rgba(255,255,255,.9);
}
#menu{
	margin:0;
	font-size:15px;
}
.navbar #menu{
	list-style: none;
	
	/* padding-top:20px;
	padding-bottom:20px; */
}

#menu>li{
	padding-top:15px;
	padding-bottom: 15px;;
	display:inline-block;
	margin-right: 35px;

}
#menu li a{
	color:black;
	text-decoration:none;
	font-weight: 300;
}
#menu li a:hover{
	color:rgb(69,165,213);
}
.submenu {
	margin-top: 15px;
    display: none;
	position: absolute;
    background-color: rgb(246,246,246);
	padding: 0;
}
#menu li:hover > .submenu {
    display: block;
	z-index: 1;
}
.submenu>li:first-child{
	border-top:2px solid #0056b3;
}
.submenu>li{
	padding-right:20px;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:1px solid #e9e9e9;
	list-style: none;
}
.submenu li:hover{
	cursor:pointer;
	color:rgb(69,165,213);
	background-color:rgba(246, 246, 246, 0.899);
}
.submenu>li a{
	text-decoration: none;
}
/* .nav{
	display:inline-block;
} */
 .logo{
	display:inline-block;
 }
 .datos{
	display:inline-block;
	font-size: 15px;
 }
 .nav{
	display:flex;
	align-items: center;
 }
 @media(max-width:547px){
	.nav{
		display:block;
	}
 }

 /* FOOTER */
 #products{
	margin-bottom:30px;
}
body{
	position:relative;
	min-height: 100vh;
	
}
.footer{
	/* margin-top:100px; */
	position:absolute;
	vertical-align: middle;
	bottom:0;
	width:100%;
	/* height: 500px; */
	background-color:rgb(47,47,47);
	text-align:center;
}
.container{
	margin:0 auto;
	display:flex;
	align-items:center;
	height: 300px;
	justify-content: center;
}
.container h3{
	color:white;
	font-weight: bold;
	/* font-size: 19px !important; */
}
.container ul{
	text-align: left;
	margin-right: 50px;
     display:inline-block;
}

.container li{
	font-size: 13px;
	margin-bottom: 10px;
	list-style: none;
	color:white;
	
}
.container li a{
	text-decoration: none;
	color:white;
}
.container li a:hover{
	color:#438ddb;
}
.datos_contacto a:hover{
	color:#438ddb;
}
.datos_contacto span{
	font-size:13px;
	color:white;
}
.datos_contacto a{
	text-decoration: none;
	color: white;
	font-size: 13px;
}
.form{
	margin-right:3px;
	color:white;
}
@media(max-width:774px){
	.container{
		text-align: justify;
		display:block;
		height: 100%;
	}
	.footer{
		position:static !important;
	}
}
@media(max-width:470px){
	/* header{
		margin-left:20px;
		margin-right:20px;
	} */
	 header{
		margin-left:20px;
		margin-right:20px;
	 }
	.contenedor{
		margin-left:20px;
		margin-right:20px;
	}
	body{
		margin:0;
	}
	
}
.copyright{
	color:white;
	font-size:13px;
	padding:10px;
}
.copyright span{
	margin:5px;
}
.copyright span a{
	text-decoration: none;
	color:white;

}
.copyright span a:hover{
	color:#438ddb;
}
.redes{
	font-size: 16px;
}
@media(max-width:941px){
	.nav{
		display:block;
		padding-bottom:5px !important;
	}
	.slider{
		margin-top:5px;
		padding: 0 !important;
	}
	.slider img{
		width:320px !important;
	}
	.slider_espacio{
		margin-left: 0 !important;
	}
	
}
.slider1, .slider2{
	display:none;
}
.inline_result{
	display:flex;
	margin-top:13px;
}
.slider_espacio{
	margin-left: 90px;
}
@media (max-width: 500px) {
    .contenedor2 {
        display: flex;
        flex-direction: column; /* Cambiar la dirección del flex a columna */
        align-items: flex-start; /* Alinear los elementos al principio */
    }

    .imagenes {
        display: flex;
        flex-direction: column; /* Asegurar que las imágenes se mantengan en columna */
        width: 100%; /* Asegurar que ocupen el ancho completo */
    }

    .imagenes img {
        margin-bottom: 10px; /* Añadir un margen inferior entre imágenes */
    }

    .texto {
        width: 100%; /* Los textos también ocupan el ancho completo */
        margin-top: 10px; /* Añadir un margen superior para separar del contenedor de imágenes */
    }
}
button:disabled {
	background-color: gray;
	color: white; /* Opcional, para mejorar la visibilidad del texto */
	cursor: not-allowed; /* Cambia el cursor para indicar que está deshabilitado */
  }