:root {
	--naranja: #d35400;
	--blanco: #ffffff;
	--blancoclarito: rgba(255, 255, 255, 0.8);
	--negro: #000000;
	--sapote: #ff7514;
	--fondo_verde: #230440;
	--gris: #4D4D4D;
	--negro: #000000;
	--azul: #1993DD;
	--azuloscuro: #2E3191;
	--amarillo: #EBDA46;
	--fondo_rojo: #ffe5e5;
	--fondo_rojo_oscuro: #c9302c;
	--rojo_peludines2: #ff1032;
	--letra_negra: #777777;
	--color_primario: #230440;
	--color2: #56b148;
	--color_botones_venta:#00c48c;
}
html,body{font:  normal 12px / 16px Roboto Condensed, Helvetica, Arial, Verdana, sans-serif;}

		
	  .hacerpedido{
		  cursor:pointer;
		  font-size: 1.6rem;
		  color:var(--azuloscuro);
	  line-height: 45px;
	  background: var(--blanco);
	  width: 90%; 
	  margin-left: 5%;
	  margin-bottom: 10px;
	  margin-top: 12px;
	  text-align: center;
	  border-radius: 10px;
	  box-shadow: 0px 1px 3px 0px #616b3c;
	  }
	  .hacerpedido:hover{
		  
	  background: white;    
	  color:var(--azul);
	  box-shadow: 0px 0px 1px 1px var(--negro);
	  }
#divsecciones{  
float:left;width:100%; margin-top:20px;}
.cintamodificadores{
	display:block;float:left;width:100%
}
@keyframes rotate {from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}} 
#porubaimagen{
	-webkit-animation: 1s rotate linear infinite;
	animation: 1s rotate linear infinite;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.titulomodificador{
	background: var(fondo_verde);
	width: 100%;
	text-align: center;
	padding: 6px;
	color: white;
	font-size: 1.4em;
}
.fichamodificador{
	min-width: 134px;
	width: 134px;
	max-width: 134px;
	min-height: 134px;
	max-height: 134px;
	color: white;
	height: 134px;
	cursor: pointer;
	margin: 8px;
	text-align: center;
	float: left;
	border: white;
	border-style: double;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1;
	padding-top:30px;
	display: block;
	background: var(rojo);
	box-shadow: inset 0px 0px 0px 2px white;
	border-radius: 9px;
	 
}

		.linea{
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: #ccc;
			margin-top: 6px;
			margin-bottom: 6px;
			padding-left: 3px;
			padding-right: 3px;
			width: 100%;
		}
		.colizquierda{width:30%;display: inline-block}
		.colderecha{width:70%;display: inline-block;text-align: right;}
		.colizquierda2{width:60%;display: inline-block}
		.colderecha2{width:40%;display: inline-block;text-align: right;}
		.naranja{
		color: #ffffff;
	background: #FF5800;
	font-weight: bold;  
		}
		.amarillo{
		color: black;
	background: var(amarillo);
		}
		.verde{
		color: white;
	background: green;
		}
		.rosado{
		color: #333;
		background: var(fondo_rojo); 
		font-weight: bold;  
		display: inline-block;
		width: 100%;
		}
		.rojo{          
			background: var(rojo);
			color: white;
		}
		.dato{
		width: 100%;
		text-align: center;
}
.textodelboton{
	font-size: 1.3em;
	margin-left: 6px;
	
}
 
.redes-flotantes {
position: fixed;
right: 8px;
top: 85%;
z-index: 20;
}
.redes-flotantes img {
float: right; clear: right;
 margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.redes-flotantes img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}

		
		.seleccionado{
		   background: #72cf7a;
	color: white;
	border-radius: 14px;
		}
		span.descripcionlarga {
   color: black;
	font-size: 1rem;
	line-height: 1;
	 width:100%;
	display: block;
	padding-top: 12px;
	color:#000000bd;

		}
	
	
	   
	.nombre_seccion{
	  
	border-radius: 15px;
	color: var(negro);
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px;
	margin-top: 21px;
	top: 9px;

	}
	.fichaseccion{
	  border-radius: 15px;
	text-shadow: 1px 2px 0px black;
	font-size: 3em;
	font-weight: bold;
	padding: 6px;
	margin-top: 21px;
	top: 9px;
	height: 7em;
	padding-top: 2em;
	overflow-wrap: break-word;
	}

	#carrito-flotante {
		position: fixed;
		right: 0;
		cursor: pointer;
		width: 184px;
		background: var(--color2);
		padding: 10px;
		color: white;
		border-radius: 20px;
	}

	.descuento{font-size: 2rem;
	font-weight: bold;
	color: red;
	background: white;
	border-style: solid;
	border-width: 1px;
	padding: 12px;
	border-radius: 12px;
	position: absolute;left: -19px;
	top: -19px;
	position: absolute;}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#labelselecciona{
		margin-top:-70px;
	}
	
	#barrasupsegcundaria{width: 100%; 
	position: fixed;
	height: 65px;line-height: 20px;
	background: #1d1814;
	float: left;padding-left: 6px;
	display: block;padding-top: 10px;
	top:0;
	color:black;text-align: left;font-size: 1.2rem; 
	z-index: 2;
	}
	
}
@media only screen and (min-device-width : 480px){
	#padre_tabla_carrito{
		
	}
#barrasupsegcundaria{display:none;}
	 #labelselecciona{
		margin-top:80px;
	}
	
	
}
 @media screen and (max-width: 422px) { 
.divparadatosdelcliente .col-6 {
	width: 100%;
}
.eliminalinea {
	position: relative;
	right: -97px;
	top: -22px;
}
	#padre_tabla_carrito{
		width: calc(100% + 62px);
		left: -33px;    
	}
	
		.volver{width:100%;}
		
		
		
		.carritovisible{left:0;width:100%;}
		.carritooculto{left:100%;width:0;}
		
		
		
		
	  
	}
	#section-top-bar ul.social li {
	padding: 0;
}
h4{color:white}
.titulo2{color:white}
.obligatorio{color:var(rojo)}
.ficha h4 {
		color: black;
		font-size: 1.5rem;
		line-height: 1;
	}
	.ficha {
		background: white;
		box-shadow: 3px 3px 3px 0px #000000;
		padding: 9px;
		border-radius: 5px;
		border-width: 1px;
		margin-bottom: 10px;
	}
   
#section-top-bar ul li {
	display: inline-block;
	margin: 0;
	padding: 0 5px;
}
	#section-top-bar ul.social li a:hover {
   background-color: white;
	border-radius: 18px;
	
	transform: scale(1.1);
}

.menuitem.rojo{
	color: #ef0c2d;border-style:none;

}

.rojo:hover{
	background: white;
}

#section-top-bar ul.social li a {
	padding: 5px 8px;
	display: block;
	font-size: 16px;
}
 #section-top-bar {
background-repeat: no-repeat !important;
	display: block;
	float: left;
	width: 100%;
	background-size: contain;
	 
	background-position: center !important;
	background-color:black !important; 
}
	.articuloshover{font-size: 14px;
	display: block;
	float: left;margin-bottom:12px;
	box-shadow: 1px 1px 1px 1px black;}
.articuloshover:active{background: #404040;}
.articuloshover div:active{border-color: white}
.articuloshover span:active{color: white;}
.articuloshover:active .descripcioncorta{color: white;}
.descripcioncorta{
	text-align: center;color:black; color:var(rojo);
font-size:1.5rem;font-weight:bold;  display: block;text-align:center;
}
.articuloshover:active span{ color:white;}
.articuloshover:hover{
	box-shadow: 0px 1px 2px 2px white;
	border-radius: 7px;
}
 
.elpedeladescipcion{
							height: 12px;
							color: #424242b5;
						}
	
	 .divparadatosdelcliente{
	background: white;
	display: block;
	float: left;
	padding: 12px;
	border-radius: 12px;

 
	flex-direction: column;
 


	}
	.boton2{
		display: block;
		cursor:pointer;
		font-size: 2.8rem;
		line-height: 45px;
		background: var(--verde);
		color:var(blanco);
		width: 100%; 
		margin-bottom: 10px;
		margin-top: 12px;
		text-align: center;
		border-radius: 10px;
		box-shadow: 0px 1px 3px 0px #616b3c;
	}
	.boton2:hover{
		background: white;    
		color:var(rojo_tranvia);
		box-shadow: 0px 0px 1px 1px var(negro);
	}
	
	
	
	.boton1{
		padding-left: 6px; 
		display:block;
		cursor:pointer;
		font-size: 2.8rem;
		line-height: 45px;
		background: var(rojo);
		color:var(blanco);
		width: 100%; 
		text-align: center;
		border-radius: 10px;
		box-shadow: 0px 1px 3px 0px #616b3c;
	}
	.boton1:hover{
		background: white;    
		color:var(rojo_tranvia);
		box-shadow: 0px 0px 1px 1px var(negro);
	}
	
	
	
	.volver{
	  
	cursor: pointer;
	text-align: center;
	border: #bfb4b4;
	border-style: double;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	width: 25%;    
	float: left;    
	font-size: 2rem;

color: var(rojo);
	text-shadow: 1px 1px 1px black;
	}
	.volver:hover{
	  background: white;
	color: white;
	text-shadow: 1px 1px 1px black;
	

	}
	
.valordeventa {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 9px;
	color: var(color_primario);
	font-size: 2rem;
}
 #contenedorcarrito{
		padding-left: 10px;        
		position: fixed;
		top: 59px;
		box-shadow: 0px 0px 5px 2px black;
		background: black;
		color: #eee;
		z-index: 2;overflow-y: scroll;
	height: 500px;
	}
	   
	
	.sinfondo{background: none;}
	.incremento{
			float: left;
	width: 100%;
	display: block;
	
	}
	.tipomodificador{
		margin-left: 20px;
	}
	.form-control.bordeverde{
		background: green;
		color:white;
	}
	.myButton {
	box-shadow: inset 1px -2px 25px -3px #1e3750;
	background: linear-gradient(to bottom, #1e3750 5%, #6c7c7c 100%);
	background-color: #768d87;
	border-radius: 17px;
	border: 2px solid #566963;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	font-size: 21px;
	font-weight: bold;
	padding: 21px 32px;
	text-decoration: none;
	text-shadow: 1px 3px 0px #2b665e;
	margin: 5px;
}
.myButton:hover {
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	background-color:#6c7c7c;
		color:white;
}
.myButton:active {
	position:relative;
	top:1px;
		color:white;
}








.boton3 {background-color: var(fondo_verde);
	border-radius: 9px;
	border: 1px solid #0b0e07;
	display: inline-block;
	cursor: pointer;
	color: var(blanco);
	font-family: Arial;
	font-size: 18px;
	padding: 13px 33px;
	width: 100%;
}
.boton3:hover { 	 
	background-color:var(blanco);
		color: var(fondo_verde);
}
.boton3:active {
	position:relative;
	top:1px;
}

 
 
		.carritovisible{left:calc(100% - 320px);width:320px;}
		.carritooculto{left:100%;width:0;}
   
	.textoabajo{
	  font-weight: bold;
	  text-align: center;
		position: inherit;
		width: 100%;
	   height: 38px;display: NONE;
	   
	}
span.titulodelarticulo {
	color:white;
}
		#total{color: wheat;
		 font-size: 2rem; 
		 float: left;}

		.articulo:hover {
		 background: #337ab7b3;
		}
		.listaarculos{
		 
		 float:left;
		 overflow-y:scroll;
		 background: #8080804d;
			
		}
 
		.oculto,.cintamodificadoresoculto{
		 display: none;
		}
		.eliminarlinea:hover{
		 box-shadow: 1px 2px 4px 1px #9c27b0;
		}
		.botonespedido:hover{
		 box-shadow: 1px 2px 4px 1px #7a34ff;
		}
		.botonespedido{
		 text-align: center;
		 width: 50%;
		 font-size: 5em;
		 display: block;
		 float: left;
		 position: relative;
		 cursor: pointer;
		 color: #1c85c6;
		}
		.botonespedido span{
		 font-size: 15px;
		 float: left;
		 margin-top: -20px;
		 color: black;
		}
	.titulo{
		width: 100%;
		color: var(fondo_verde);
		font-weight: bold;
		text-align: left;
		font-size: 1.2rem;
		font-style: initial;
		 
		}
	.gracias{
		line-height: 1;
		width: 100%;
		color: var(rojo);
		font-weight: bold;
		text-align: center;
		font-size: 2em;
		font-style: initial;
		padding: 4px;
		}
	.centro{
		 float: left;
		}
 
		
		.seccion img {
	border-radius: 16px;
}
		.seccion{
			cursor: pointer;
			/*max-height: 320px;*/
			text-align: center;      
			padding: 30px;
		}
		.seccion:hover{
			border-radius: 12px;
			box-shadow: 0px 0px 4px 3px white;
		}
		.articulo{        
		
		min-height: 134px;
		cursor:pointer;
		text-align:center;
		border:#bfb4b4;
		border-style: double;    
		justify-content: center;
		align-items: center;
		font-weight: bold;    
		}
		.siguiente{        
			background: #006d8c;
			color:white;min-width: 134px;
		width: 134px;
		max-width: 134px;        
		min-height: 134px;
		max-height: 134px;
		height: 134px;
		cursor:pointer;
		margin: 8px;
		text-align:center;
		float: left;
		border:#bfb4b4;
		border-style: double;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;    
		}
		.textopequeñoentabla{
		font-size: 15px;
		}
	.enlaceblanco{color:white}
	.enlaceblanco:hover{text-decoration: underline}
	.caja{
		background: var(negro);
		border-radius: 12px;
	}
	.form-control{
		font-weight: 100;
	}
	 .blanco{
		text-align: center;
		border-radius: 28px;
		font-size: 1.4em;
	}
	a.menuitem {
	color: var(rojo);
	background: var(blanco);
	font-size: 1.5rem;
	font-weight: bold;
	padding: 6px;
	border-width: 1px;
	border-style: solid;
	margin-left: 12px;
}
a.menuitem:hover {
	background: var(rojo_tranvia);
	color: white;
}
 

#botonatrasmovil{
	position:absolute;width: 45px;
}                
#tucompra {
	max-width: 100%;
}        
.nombreseccion {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	color: #2b2936;
} 


		.btn-primary {
background:#e1bf99 !important;
color: black !important;
}
 
   #botonnumerodearticulos{
			  animation: heartbeat 1s infinite;
			  position: relative;display: none;
			  top: -11px;font-size: 1rem;background: var(--amarillo);
			  left: 3px;font-weight: bold;
			  padding: 3px 7px;
			  border-radius: 50%;
	  }
i.fa.fa-shopping-cart {
	font-size: 1.8rem !important;
color:#56321c;
}        
	   
.imagenseccion{
height:280px;
}
.adicional_especial{
	font-weight: bold;
	font-size: 2rem;
	text-align: center;
	color: var(--azuloscuro);
}
.valor_adicional_especial{display:none;}
.pagination-container {
	display: flex;
	flex-direction: column;
}        
ul.pagination li {
	font-size: 1.5rem !important;
	margin-left: 14px;
	font-weight: bold;
}
		  
		 .imagendelarticulo_encarrito{
			max-width: 100%;
			max-height: 400px;
		 }
		 
		 /* Estilos para el carrito lateral */
		 #carrito-lateral {
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0,0,0,0.1);
			padding: 15px;
		 }
		 
		 #carrito-lateral .titulo-carrito {
			font-size: 1.2rem;
			font-weight: bold;
			margin-bottom: 15px;
			text-align: center;
			padding-bottom: 10px;
			border-bottom: 1px solid #e0e0e0;
		 }
		 
		 .carrito-item {
			padding: 10px 0;
			border-bottom: 1px solid #f5f5f5;
		 }
		 
		 .carrito-footer {
			margin-top: 15px;
			padding-top: 10px;
			border-top: 1px solid #e0e0e0;
		 }
		 
		 @media (max-width: 767px) {
			#carrito-lateral {
				position: static !important;
				margin-top: 2rem;
			}
			
			.checkout-btn {
				width: auto;
				padding: 8px 16px;
			}
			
			#resumen-compacto {
				font-size: 0.9rem;
				border: 1px solid #e0e0e0;
			}
		 }
		 
		 /* Moderniza la barra lateral de secciones */
		#sidebar-secciones {
			background: linear-gradient(135deg, #f8fafc 60%, #e9ecef 100%);
			border-right: 1px solid #e0e0e0;
			padding-top: 2rem;
			border-radius: 18px;
			box-shadow: 0 2px 16px 0 rgba(80,80,80,0.07);
			min-height: 80vh;
		}
		#sidebar-secciones .nav {
			padding-left: 0;
		}
		#sidebar-secciones .nav-item {
			margin-bottom: 0.5rem;
		}
		#sidebar-secciones .nav-link {
			display: flex;
		align-items: center;
		padding: 0.75rem 1.1rem;
		border-radius: 12px;
		color: #333;
		font-weight: 500;
		font-size: 1.08rem;
		transition: background 0.18s, color 0.18s, box-shadow 0.18s;
		letter-spacing: 0.01em;
		}
		#sidebar-secciones .nav-link:hover,
		#sidebar-secciones .nav-link.active {
			background: #ffe9d6;
			color: #ff7514;
			box-shadow: 0 2px 8px 0 rgba(255,117,20,0.07);
			text-decoration: none;
		}
		#sidebar-secciones .nav-link:before {
			content: '';
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #ff7514;
		margin-right: 12px;
		opacity: 0.12;
			transition: opacity 0.2s;
		}
		#sidebar-secciones .nav-link.active:before,
		#sidebar-secciones .nav-link:hover:before {
			opacity: 1;
		}
		#sidebar-secciones .sidebar-sticky {
	position: sticky;
	top: 32px;
	z-index: 2;
	/* Para que no tape el hero ni el carrito */
}
@media (max-width: 991px) {
	#sidebar-secciones .sidebar-sticky {
		position: static;
		top: unset;
	}
}


#sidebar-secciones {
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  padding-top: 2rem;
}
#sidebar-secciones .nav-link.active {
  background: #ff7514;
  color: #fff;
  border-radius: 5px;
}
#productos-lista .articuloshover {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  background: #fff;
  transition: box-shadow 0.2s;
}
#productos-lista .articuloshover:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ficha-articulo {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.04);
		margin-bottom: 2rem;
		padding: 1rem;
		min-height: 170px;
		position: relative;
		transition: box-shadow 0.2s;
	}
	.ficha-articulo:hover {
		box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	}
	.ficha-articulo-img {
		width: 120px;
		height: 120px;
		object-fit: cover;
		border-radius: 12px;
		margin-right: 1.2rem;
	}
	.ficha-articulo-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.ficha-articulo-titulo {
		font-weight: bold;
		font-size: 1.1rem;
		margin-bottom: 0.3rem;
		color: #222;
		word-wrap: break-word;
		word-break: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		line-height: 1.3;
	}
	.ficha-articulo-desc {
		font-size: 0.97rem;
		color: #555;
		margin-bottom: 0.7rem;
	}
	.ficha-articulo-precio {
		font-size: 1.15rem;
		font-weight: bold;
		color: #222;
		margin-bottom: 0.2rem;
	}  
	.ficha-articulo-btn {
		position: absolute;
		right: 18px;
		bottom: 18px;
		background: #00c48c;
		color: #fff;
		border: none;
		border-radius: 12%;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0,0,0,0.07);
		transition: background 0.2s;
	}
	.ficha-articulo-btn:hover {
		background: #009e6d;
	}
	@media (max-width: 767px) {
		.ficha-articulo { flex-direction: column; align-items: center; }
		.ficha-articulo-img { margin-right: 0; margin-bottom: 1rem; }
		.ficha-articulo-btn { right: 12px; bottom: 12px; }
	}
	 .order-card {
			background-color: #fff;
			border-radius: 12px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			padding: 16px;
		}
		.order-title {
			font-size: 1.2rem;
			font-weight: bold;
			margin-bottom: 1rem;
			color: #333;
		}
		.order-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		.order-item:last-child {
			border-bottom: none;
		}
		.item-info {
			display: flex;
			align-items: center;
		}
		.item-qty {
			font-weight: bold;
			margin-right: 8px;
			color: #555;
			min-width: 30px;
		}
		.item-name {
			font-size: 1rem;
			color: #333;
		}
		.item-price {
			font-weight: bold;
			color: #333;
		}
		.item-actions {
			display: flex;
			align-items: center;
			margin-left: 10px;
		}
		.btn-edit, .btn-add {
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #ddd;
			border-radius: 50%;
			background: transparent;
			margin: 0 5px;
			color: #555;
			font-size: 0.9rem;
			cursor: pointer;
			transition: all 0.2s;
		}
		.btn-edit:hover, .btn-add:hover {
			background-color: #f0f0f0;
		}
		.order-total {
			margin-top: 1rem;
			padding-top: 1rem;
			border-top: 1px solid #eee;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
		}
		.checkout-btn {
			display: block;
			width: 100%;
			padding: 12px;
			margin-top: 1rem;
			text-align: center;
			background-color: var(--color_botones_venta);
			color: white;
			border: none;
			border-radius: 8px;
			font-weight: bold;
			cursor: pointer;
			transition: background-color 0.2s;
		}
		.checkout-btn:hover {
			background-color: #00b248;
		}
				.adicional-card {
			transition: transform 0.2s, box-shadow 0.2s;
			border: 1px solid #eee;
		}
		
		.adicional-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
		}
		
		.check-adicional:checked + label {
			font-weight: bold;
			color: #0d6efd;
		}
		
		#modalAdicionales .modal-content {
	border-radius: 16px;
	border: none;
	overflow: hidden;
}

#modalAdicionales .modal-header {
	background: linear-gradient(135deg, #ff7514, #ff9d4d);
	border-bottom: none;
}

#modalAdicionales .modal-title {
	color: white;
	font-weight: bold;
}

#modalAdicionales .modal-body {
	padding: 1.5rem;
	max-height: 70vh;
	overflow-y: auto;
}

#modalAdicionales .modal-footer {
	border-top: 1px solid #eee;
	padding: 1rem 1.5rem;
}

#btnConfirmarAdicionales {
	background-color: #00c48c;
	border-color: #00c48c;
	font-weight: bold;
	padding: 0.6rem 1.5rem;
	border-radius: 8px;
}

#btnConfirmarAdicionales:hover {
	background-color: #00a573;
	border-color: #00a573;
}

.close-adicionales {
	background-color: white !important;
	color: #333 !important;
	opacity: 1 !important;
}


/* //comenzan los etilos para movil */
@media (max-width: 767px) {
  /* Mostrar menú de secciones en móvil */
  #sidebar-secciones {
	display: none; /* Oculto por defecto */
	position: fixed;
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	z-index: 1050;
	background: white;
	box-shadow: 2px 0 10px rgba(0,0,0,0.2);
	overflow-y: auto;
	transition: transform 0.3s;
  }
  
  #sidebar-secciones.active {
	display: block;
  }
  
  /* Botón para abrir el menú */
  .menu-toggle {
	display: block;
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #ff7514;
	color: white;
	text-align: center;
	line-height: 50px;
	font-size: 24px;
	z-index: 1051;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }

  /* Ajustar layout de columnas para móvil */
  #contenedor-productos {
	width: 100%;
	padding: 0 10px;
  }
  
  /* Ajuste del carrito para móvil */
  .col-md-3 {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 0;
  }
  
  #carrito-lateral {
	margin-top: 0;
	border-radius: 15px 15px 0 0;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
	max-height: 40vh;
	overflow-y: auto;
  }
  
  /* Mostrar solo la cabecera del carrito con un indicador de cantidad y total */
  #carrito-lateral .titulo-carrito {
	padding: 10px 15px;
	position: relative;
  }
  
  /* Botón para expandir/colapsar el carrito */
  .carrito-toggle {
	position: absolute;
	right: 15px;
	top: 10px;
	color: #56321c;
  }
  
  /* Optimizar fichas de productos */
  .ficha-articulo {
	flex-direction: column;
	padding: 12px;
  }
  
  .ficha-articulo-img {
	width: 100%;
	height: 120px;
	margin-bottom: 10px;
  }
  
  .ficha-articulo-btn {
	position: static;
	width: 100%;
	margin-top: 10px;
  }
}
@media (max-width: 767px) {
  #modalAdicionales .modal-dialog {
	margin: 0;
	max-width: 100%;
	height: 100%;
  }
  
  #modalAdicionales .modal-content {
	border-radius: 0;
	min-height: 100vh;
  }
  
  #modalAdicionales .modal-body {
	padding: 1rem;
  }
  
  .adicional-item {
	padding: 10px;
  }
  
  /* Hacer los botones de adicionales más grandes para mejor interacción táctil */
  .btn-check-adicional {
	width: 30px;
	height: 30px;
  }
}
@media (max-width: 767px) {
  .product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
  }
  
  .product-card {
	margin-bottom: 0;
	height: 100%;
  }
  
  .product-card .card-img-top {
	height: 120px;
	object-fit: cover;
  }
  
  .product-card .card-title {
	font-size: 14px;
	margin-bottom: 5px;
	height: 40px;
	overflow: hidden;
  }
  
  .product-card .card-text {
	font-size: 13px;
  }
  
  .product-price {
	font-size: 16px;
  }
  
  .btn-add-cart {
	width: 100%;
	padding: 8px;
  }
}
.mobile-notification {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0, 196, 140, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  transition: transform 0.3s;
  text-align: center;
  max-width: 90%;
}

.mobile-notification.show {
  transform: translateX(-50%) translateY(0);
}
/* Mejora de imágenes en fichas de productos para dispositivos móviles */

.imagendelarticulo {
  width: 100%;
  max-height: 257px;
  object-fit: contain; /* Mantiene la proporción sin recortar */
  padding: 5px;
}

/* Ajustes específicos para móviles */
@media (max-width: 767px) {
  /* Contenedor de la ficha completa */ 
  .ficha-articulo {
    flex-direction: column;
    padding: 12px;
    align-items: center;
  }
  
  /* Contenedor de la imagen */ 
  .ficha-articulo-img {
    width: 100%;
    height: auto;
    max-height: 180px;
    margin-bottom: 10px;
    object-fit: contain;
    aspect-ratio: 4/3; /* Mantiene una proporción consistente */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  /* Imagen dentro del contenedor */
  .ficha-articulo-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  
  /* Productos en grid para categorías */
  .product-card .card-img-top {
    height: auto;
    aspect-ratio: 1/1; /* Imágenes cuadradas en el grid */
    object-fit: contain;
    background-color: #f9f9f9;
    padding: 8px;
  }
  
  /* Para imágenes en el carrito */
  .imagendelarticulo_encarrito {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
  }
  
  /* Botón de añadir al carrito */
  .ficha-articulo-btn {
    position: static;
    width: 100%;
    height: 44px;
    margin-top: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .ficha-articulo-btn i {
    margin-right: 8px;
  }
   
}

/* Ajuste adicional para pantallas muy pequeñas */
@media (max-width: 360px) {
  .ficha-articulo-img {
    max-height: 140px;
  }
}

/* Optimización del carrito - layout mejorado */
.item-carrito {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
  width: 100%;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 8px;
}

.item-carrito-imagen {
  grid-column: 1;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-carrito-info {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Importante para que text-overflow funcione */
}

.item-carrito-titulo {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.item-carrito-cantidad {
  font-size: 0.85rem;
  color: #666;
}

.item-carrito-precio {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  min-width: 90px; /* Espacio mínimo para precio y botones */
}

.item-carrito-valor {
  font-weight: 600;
  margin-bottom: 4px;
}

.item-carrito-acciones {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background-color: #f0f0f0;
  color: #333;
  font-size: 16px;
  cursor: pointer;
}

.btn-action:hover {
  background-color: #e0e0e0;
}

.btn-remove {
  color: #ff5252;
}

.btn-add {
  color: #28a745;
}

/* Para dispositivos móviles */
@media (max-width: 767px) {
  .item-carrito {
    grid-template-columns: 50px 1fr 80px;
    gap: 8px;
  }
  
  .item-carrito-imagen {
    width: 50px;
    height: 50px;
  }
  
  .item-carrito-precio {
    min-width: 80px;
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 360px) {
  .item-carrito {
    grid-template-columns: 40px 1fr 70px;
    gap: 5px;
  }
  
  .item-carrito-imagen {
    width: 40px;
    height: 40px;
  }
  
  .item-carrito-precio {
    min-width: 70px;
  }
}

/* Estilos actualizados para el carrito sin imágenes */
.item-carrito {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
  width: 100%;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 8px;
}

.item-carrito-info {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Importante para que text-overflow funcione */
}

.item-carrito-titulo {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.item-carrito-cantidad {
  font-size: 0.85rem;
  color: #666;
}

.item-adicionales {
  margin-top: 5px;
  font-size: 0.8rem;
}

.adicional-item {
  padding: 2px 0;
  color: #666;
}

.adicional-precio {
  margin-left: 5px;
  font-weight: 500;
}

.item-carrito-precio {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  min-width: 90px; /* Espacio mínimo para precio y botones */
}

.item-carrito-valor {
  font-weight: 600;
  margin-bottom: 4px;
}

.item-carrito-acciones {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 767px) {
  #productos-lista {
    margin-bottom: 160px; /* Espacio fijo grande que funcione con el carrito expandido */
  }
  
  /* Aplicar un poco de espacio también al contenedor principal */
  .container-fluid {
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  #productos-lista {
    padding-bottom: 110px; /* Espacio para evitar que el carrito oculte el último producto */
  }
  
  /* Cuando el carrito está expandido, necesitamos más espacio */
  #productos-lista.carrito-expandido {
    padding-bottom: 20px;
  }
  
  /* Asegurar que el contenido principal tenga suficiente espacio al final */
  main[role="main"] {
    padding-bottom: 30px;
  }
}

/* Estilos para el formulario de datos del cliente en móviles */
@media (max-width: 768px) {
    .divparadatosdelcliente {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        z-index: 1050;
        padding: 20px;
        overflow-y: auto;
        backdrop-filter: blur(2px);
    }
    
    .divparadatosdelcliente::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        z-index: -1;
    }
    
    /* Asegurar que el carrito colapsado no interfiera */
    #carrito-lateral.collapsed {
        height: auto;
        min-height: unset;
    }
    
    #carrito-lateral.collapsed #carrito-contenido {
        display: none !important;
    }
}

/* Transición suave para el colapso del carrito */
#carrito-contenido {
    transition: all 0.3s ease-in-out;
}

.carrito-toggle {
    transition: all 0.2s ease;
}


/* Estilos para el mensaje de tienda cerrada */
.tienda-cerrada-container {
    background: rgba(255, 255, 255, 0.96);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.tienda-cerrada-card {
    max-width: 600px;
    width: 90%;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: fadeInUp 0.5s ease-out;
}

.tienda-cerrada-header {
    background: #ff7514;
    color: white;
    padding: 20px;
    text-align: center;
}

.tienda-cerrada-body {
    padding: 30px;
}

.tienda-cerrada-icon {
    font-size: 60px;
    color: #ff7514;
    margin-bottom: 20px;
    display: block;
    text-align: center;
}

.tienda-cerrada-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

.tienda-cerrada-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
    text-align: center;
}

.horarios-tabla {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: separate;
    border-spacing: 0;
}

.horarios-tabla th, .horarios-tabla td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.horarios-tabla th {
    background: #f9f9f9;
    font-weight: 600;
    color: #555;
}

.horarios-tabla tr:last-child td {
    border-bottom: none;
}

.dia-actual {
    font-weight: bold;
    background-color: #fff6e9;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .tienda-cerrada-card {
        width: 95%;
    }
    
    .tienda-cerrada-title {
        font-size: 20px;
    }
    
    .horarios-tabla th, .horarios-tabla td {
        padding: 8px 5px;
        font-size: 14px;
    }
}

/* Mejorar visual de los controles de cantidad de adicionales */
.adicional-cantidad-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 18px;
    padding: 4px 10px;
    min-width: 110px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.adicional-cantidad-control .btn-adicional {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #ff7514;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    outline: none;
}

.adicional-cantidad-control .btn-adicional:active,
.adicional-cantidad-control .btn-adicional:focus {
    background: #e05d00;
    color: #fff;
}

.adicional-cantidad-control .btn-adicional:hover {
    background: #ffa14d;
    color: #fff;
}

.adicional-cantidad-control .cantidad-adicional {
    min-width: 28px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    background: transparent;
    border: none;
    margin: 0 2px;
    user-select: none;
}
@media (max-width: 767px) {
  .adicional-cantidad-control {
    min-width: 90px;
    gap: 6px;
    padding: 3px 6px;
  }
  .adicional-cantidad-control .btn-adicional {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
  .adicional-cantidad-control .cantidad-adicional {
    font-size: 1.3rem;
  }
}  

.contador-seleccion {
    background: #ff7514;
    color: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    font-weight: 600;
    margin-left: 8px;
    min-width: 38px;
    text-align: center;
    transition: background 0.2s;
}
.grupo-adicionales .contador-seleccion {
    font-size: 1em;
    vertical-align: middle;
}