.content-wrapper,
.main-footer {

  /*background-image: url(../img/plantilla/fondo.jpg);*/
  background-color: #262C3A !important;

}

.main-sidebar {

  /*background-image: url(../img/plantilla/fondo.jpg);*/
  background-color: #262C3A !important;

}


.formularioVentaCss{

	background-color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0px;

}

.profesional{

  background-color: #F6D5B6 !important;

}

.publico{

  background-color: #9AB8D0 !important;

}

.panelFacturar{

  background-color: #B6CBDE !important;

}

.panelMediosPago{

  background-color: #80A5B8 !important;

}

.panelMediosPago .input-group{
	width: -webkit-fill-available;
}

.panelBotones{

  background-color: #23434E !important;

}

.panelCursos{

  background-color: #8DAAA6 !important;
	
}

.table-striped>tbody>tr:nth-of-type(odd) {

  background-color: #F4EDE5 !important;

}

/*
#7aacb3
#4c6e81
#cf8da7
#aa5377
#3b3759
*/


.datosVenta, .sumarProducto, .verFotosYSumarProductos{

	font-size: medium;

}

.inputdniCuit{
	
	padding: 0px 0px;

}

.inputMask{

	height: 35px;

}

#informacionCuotas2, #informacionCuotas {

	font-size: smaller;

}

.oferta{
	 text-decoration:line-through;
	 color:#ccc;
	 font-size:15px;
}


#ventaNotaPresu > div{

	float: left;
	display: flex;
	justify-content: center;
	align-items: center; 

}


/*===========================================================
PÁGINA DEVOLUCIÓN
===========================================================*/


.colorS {

	background-color: #303F52 !important;
	color: white;

}

.colortS {

	color: #6AB050;

}

.inputInitial{

	background-color: seashell !important;

}

.btnClienteStilo{

	font-size: 2rem;
  
}

.btnModoPresupuesto, .btnJack, .btnComentario, .btnProductosGabinete, .btnCursos{

	font-size: 1.2rem;

}

.btnJack:hover, .btnModoPresupuesto:hover, .btnComentario:hover, .btnProductosGabinete:hover, .btnCursos:hover{

	transform: scale(1.1);

}

.btnEnviarInfoCursosWS, .whatsapp{

	background-color: #25D366 !important;

}

#aboutme{top:-66%;right:-50%;padding:30px 50px 0 0}
#aboutme p{font-size:1.5em;}
#aboutme.open{top:0;right:0}
#aboutme:before{bottom:0;left:-500%;-ms-transform:translate(-200px) rotate(45deg);
	-webkit-transform:translate(-200px) rotate(45deg);transform:translate(-200px) rotate(45deg);
	-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;transform-origin:center bottom}

	#aboutme .scrollbar .track{left:20px}
.fb-icon,.gp-icon,.yt-icon,.lin-icon,.rss-icon,.insta-icon,.tw-icon,.pin-icon,.redd-icon{display:block;float:right;
	height:75px;width:75px}

.nopadding{padding:0 !important}
.notpad{padding-top:0 !important}
.nobpad{padding-top:0 !important}
.nolpad{padding-left:0 !important}
.norpad{padding-right:0 !important}
.nomargin{margin:0 !important}
.left,.leftcol{float:left}
.right,.rightcol{float:right}
.tleft{text-align:left}
.tright{text-align:right}
.tcenter{text-align:center}
.hide,.hidden{display:none !important}
.show{display:block !important}
.in1line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.col2{width:50%;float:left}



.displayNone{

  display: none;
  z-index: 20;

}

.displayBlock{

  display: block;

}


.neu{

  border-radius: 50px;
  background: #e0e0e0;
  box-shadow:  20px 20px 60px #bebebe,
               -20px -20px 60px #ffffff;
    
}

.botonPagar{

	width: 85%;
    font-size: initial;

}

.botonAsignar{

	width: 15%;
    font-size: initial;

}

.situacionActual button{

    font-size: initial;
	
}
.containerProducto{
	position: relative;
	display: inline-block;
}

.hoverProducto{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.agregarProducto {
	
	background-color: #5a95f5;
	color: #fff;
	border: none;
}

.containerProducto img{
	opacity: 1;
	transition: opacity 0.5s ease;
}

.containerProducto:hover img{
	opacity: 0.2;
}

.containerProducto:hover .hoverProducto{
	opacity: 1 !important;
}

#contenedorProductos, #galeriaProductos {
	display: grid;
	gap: 15px;
	padding: 20px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

.productos-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	padding: 2rem;
  }
  
  .producto-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
  }
  
  .producto-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  }
  
  .producto-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
  }
  
  .producto-card h3 {
	font-size: 2.5rem;
	color: #333;
	text-align: center;
	margin: 0.8rem 0 0.4rem;
	text-transform: uppercase;
  }
  
  .precio {
	color: #2e7d32;
	font-weight: 600;
	font-size: 2rem;
	margin-bottom: 0.8rem;
  }
  
  .btn-agregar {
	padding: 1.6rem 1.4rem;
	background: linear-gradient(135deg, #86c5f8, #597de7);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
  }
  
  .btn-agregar:hover {
	background: linear-gradient(135deg, #597de7, #4053c4);
  }

  .agregar-con-cantidad {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	align-items: center;
	justify-content: center;
  }
  
  .cantidad-input {
	width: 60px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 8px;
	text-align: center;
  }

.coleccion-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	margin-bottom: 30px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	overflow: hidden;
	transition: all 0.3s ease;
}

.coleccion-header {
	display: flex;
    flex-wrap: wrap;
    padding: 5px 20px;
    gap: 20px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.coleccion-banner {
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
	box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.coleccion-info {
	flex: 1;
	text-align: -webkit-center;
	margin-bottom: 30px;
}

.coleccion-info h3 {
	font-size: 22px;
	margin-bottom: 8px;
	color: #333;
}

.coleccion-info p {
	color: #555;
	font-size: 14px;
	margin-bottom: 12px;
}

.destacar-coleccion {
	box-shadow: 0 0 0 4px #a3d5ff;
	transition: box-shadow 0.4s ease;
	border-radius: 12px;
}

.destacar-coleccion.fade {
	box-shadow: 0 0 0 0 transparent;
}


.destacar-coleccion {
	outline: 2px solid #8ecae6;
	outline-offset: 4px;
	animation: destacarFade 0.6s ease-in-out;
}

@keyframes destacarFade {
	0% { outline-color: transparent; transform: scale(1.02); }
	100% { outline-color: #8ecae6; transform: scale(1); }
}

.ver-detalles-coleccion {
	background: linear-gradient(135deg, #008aff, #00d4ff);
	border: none;
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.3s ease;
}

.ver-detalles-coleccion:hover {
	background: linear-gradient(135deg, #0073e6, #00b7e6);
}

.bloque-marca {
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 20px;
  height: 100%;
display: flex;
  flex-direction: column;
}
.bloque-header img {
  width: 100%;
  object-fit: cover;
}
.bloque-titulo {
  background: #f5f5f5;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
}
.bloque-body {
  padding: 10px;
  font-size: 14px;
}

#contenedorProductos::before {
  content: none !important;
  display: none !important;
}

#contenedorProductos .col-md-2 {

	width: 100%;
}

#verProductos .orden-producto{

	font-size: 3rem;
}

.select-orden, .cambioModo,  #tipoVista{
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background-color: #fff;
	font-size: 14px;
	color: #333;
	min-width: 160px;
	background: #fff url('data:image/svg+xml;utf8,<svg fill="gray" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
	background-size: 14px;
	appearance: none;
	padding-right: 30px;
}

.coleccion-productos {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 0 20px 20px;
}

.producto-mini {
	width: 90px;
	text-align: center;
}

.producto-mini img {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.producto-mini span {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #444;
}



  .principios-activos {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
  }
  
  .principio-card {
	display: flex;
	gap: 1rem;
	background: #f9f9f9;
	border-radius: 12px;
	padding: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  
  .principio-card img {
	width: 15%;
	object-fit: cover;
	border-radius: 10px;
  }
  
  .principio-info h4 {
	margin: 0 0 0.4rem;
	font-size: 3rem;
    line-height: 5rem;
	color: #333;
  }
  
  .principio-info p {
	margin: 0;
	font-size: 2rem;
	color: #555;
  }
  

  .sin-stock {
	color: #c62828;
	font-weight: bold;
	margin-top: 10px;
  }
  
  .btn-avisar {
	background: linear-gradient(135deg, #ccc, #aaa);
	color: white;
	padding: 0.6rem 1.2rem;
	border: none;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
	margin-top: 0.5rem;
  }
  
  .btn-avisar:hover {
	background: linear-gradient(135deg, #aaa, #888);
  }

  #galeriaCategorias {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	
  }

#galeriaCategorias::before {
  content: none !important;
  display: none !important;
}
  
  .categoria-thumb {
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	transition: transform 0.2s;
	width: 120px;
  }
  
  .categoria-thumb:hover {
	transform: scale(1.05);
  }
  
  .categoria-thumb img {
	width: 100%;
	height: auto;
	border-radius: 10px;
  }
  
  .categoria-thumb p {
	margin-top: 5px;
	font-size: 0.9rem;
	color: #444;
  }

  .filtro-btn.active {
    background-color: #007bff;
    color: white;
  }

  .filtros-categorias button{

	font-size: larger;
  }

  .btn-group-toggle .btn {
	padding: 0.5rem 1.2rem;
	font-weight: 600;
	font-size: 0.95rem;
	transition: 0.3s;
  }

  .modal1 {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
  
  .modal-contenido {
	background: white;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 20px;
	border-radius: 16px;
	position: relative;
  }

  #modalTitulo {
	font-weight: 600;
  }
  
  .modal-tabs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 15px 0;
  }
  
  .tab-btn {
	padding: 0.5rem 1rem;
	border: none;
	background: #e0e0e0;
	border-radius: 10px;
	cursor: pointer;
	font-weight: bold;
	transition: 0.3s;
  }
  
  .tab-btn.active {
	background: #a2c2f0;
	color: #fff;
  }
  
  .tab-section {
	display: none;
  }
  
  .tab-section.active {
	display: block;
  }
  

  .modal-contenido .col-md-8 {
	text-align: left;
	padding: 30px 10px;
  }

  .modal-descripcion {
	padding: 10px 0;
	font-size: 2rem;
	color: #444;
	line-height: 1.6;
  }
  
  .modo-uso {
	margin-top: 20px;
	background: #f4f8fc;
	border-left: 4px solid #7baee1;
	padding: 10px 15px;
	border-radius: 8px;
  }
  
  .modo-uso h4 {
	margin: 0 0 8px;
	font-size: 1rem;
	color: #2a74b1;
  }

  .sin-stock {
	color: #c62828;
	font-weight: bold;
	margin-top: 10px;
  }
  
  .btn-avisar {
	background: linear-gradient(135deg, #ccc, #aaa);
	color: white;
	padding: 0.6rem 1.2rem;
	border: none;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
	margin-top: 0.5rem;
  }
  
  .btn-avisar:hover {
	background: linear-gradient(135deg, #aaa, #888);
  }
  

  .cerrar-modal {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
	color: #888;
	cursor: pointer;
  }
  
  .modal-contenido img {
	max-width: 100%;
	border-radius: 12px;
	margin-bottom: 1rem;
  }
  
  .galeria-multimedia {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1rem;
  }
  
  .galeria-multimedia img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  

  .preview-icon {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	z-index: 2;
  }
  
  .preview-icon:hover {
	background: white;
	transform: scale(1.1);
  }
  
  
  .producto-card {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeIn 0.6s ease forwards;
  }

  .lightbox {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
  }
  
  .lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6);
	animation: zoomIn 0.3s ease;
  }
  
  .cerrar-lightbox {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 3rem;
	color: white;
	cursor: pointer;
	z-index: 100000;
  }
  
  .nav-left, .nav-right {
	position: absolute;
	top: 50%;
	font-size: 3rem;
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	user-select: none;
	z-index: 100000;
	transform: translateY(-50%);
	transition: 0.3s;
  }
  
  .nav-left:hover, .nav-right:hover {
	color: #ccc;
  }
  
  .nav-left { left: 30px; }
  .nav-right { right: 30px; }

#galeriaCategorias img{

	border-radius: 10px;
	transition: transform 250ms;
	cursor: pointer;

}

#galeriaCategorias img:hover{

	transform: translateY(-2px);
	box-shadow: 3px 3px 10px black;

}

#full-menu{

	position: fixed;
	align-content: center;
	z-index: 25;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100vh; 
	background: #292929;
	transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	overflow: hidden;
	overflow-y: auto !important; /* permite scroll si hay muchas subcategorías */

}

#full-menu .wrap{

	flex-direction: column; /* importante en móvil */
    height: auto;           /* en lugar de 100% */
    align-items: stretch;   /* usar todo el ancho disponible */
    padding: 20px;

}

#full-menu .wrap .navegacion{

    flex-grow: 1;
    overflow-y: auto;

}

#full-menu .wrap .menu-text{

	font-family: 'Century Gothic';
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	color: #9A9A9A;

}

#full-menu .wrap .botones{
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#full-menu .wrap .botones a i{

	font-size: 6rem;

}



#full-menu .wrap .menu-text img{

	width: 70%;

}

#full-menu .navegacion ul{

	list-style: none;

} 

#full-menu .navegacion ul li{

	margin: 10px 0px;

} 

#full-menu .navegacion ul li a{

	font-family: 'Century Gothic';
	text-decoration: none;
	font-size: 20px;
	color: #fff;

}

#full-menu .navegacion ul li a:hover{

	color: #1EE0F1;

}

#full-menu .menuPequeño{

	display: none;

}

.menuPequeño, .menu-principal{

	padding-inline-start: unset;

}

.subcat-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 15px;
    margin-bottom: 0;
}

.subcat-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.subcat-list li:last-child {
    border-bottom: none;
}

.subcat-list a {
    color: #333;
    text-decoration: none;
    display: block;
}

.producto-controles {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background-color: #fafafa;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    align-content: center;
    flex-direction: row-reverse;

}

.btnVolverDesdeGaleria, .btnVolverDesdeColeccion  {
	background-color: #fff;
	color: #d9534f;
	border: 1px solid #d9534f;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
	text-align: center;
}

.btnVolverDesdeGaleria:hover, .btnVolverDesdeColeccion:hover {
	background-color: #d9534f;
	color: #fff;
}

.filtros-opciones {
	display: flex;
	align-items: center;
	gap: 15px;
}

.check-label {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #333;
	gap: 6px;
	cursor: pointer;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.chip {
  background: linear-gradient(135deg, #f7fafd, #eef3f9);
  color: #4a4a4a;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #dce4ec;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  font-family: 'Segoe UI', sans-serif;
}

.chip:hover {
  background: linear-gradient(135deg, #e8f1fc, #dceaf6);
  color: #2a2a2a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  cursor: default;
}

.producto-multimedia {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  background: #fafafa;
  border-radius: 8px;
}
.imagenes-multimedia img {
  border: 2px solid transparent;
}
.imagenes-multimedia small {
  display: block;
  text-align: center;
}

.input-portada{

	width: 50%;
    font-size: larger;
    padding: 15px;
    margin-top: 15px;
    justify-items: center;

}

.input-portada.is-invalid {
	border: 2px solid #e74c3c; /* rojo */
	background-color: #fceaea;
}

.input-portada.is-valid {
	border: 2px solid #2ecc71; /* verde */
	background-color: #eafaf1;
}

.imagen-multimedia {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.imagen-multimedia.portada {
  border: 3px solid #28a745;
  position: relative;
}

.imagen-multimedia.portada::after {
  content: '✔';
  position: absolute;
  top: 4px;
  right: 4px;
  background: #28a745;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

.input-portada.is-valid {
  border: 2px solid #28a745;
}

.input-portada.is-invalid {
  border: 2px solid #dc3545;
}

.img-portada {
	border: 3px solid #28a745; /* verde */
	box-shadow: 0 0 10px #28a745;
	transition: all 0.3s ease;
	border-radius: 6px;
}

.img-portada-glow {
	animation: glowSuccess 0.8s ease-in-out;
}

.buscador-input {
	margin-top: 10px;
}

.buscador-input .input-group-addon {
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	border-right: none;
	border-radius: 12px 0 0 12px;
	padding: 12px 20px;
	font-size: 16px;
}

.buscador-input .form-control {
	padding: 21px 15px;
	border: 1px solid #ccc;
	border-left: none;
	border-radius: 0 12px 12px 0;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
	font-size: 15px;
	transition: all 0.3s ease;
}

.buscador-input .form-control:focus {
	outline: none;
	border-color: #aaa;
	box-shadow: 0 0 5px rgba(100, 100, 255, 0.3);
	background-color: #fefefe;
}
.filtros-opciones{
	width: 100%;

}
.filtros-opciones::before, .filtros-opciones::after {
  content: none !important;
  display: none !important;
}

.filtros-opciones .col-xs-12 {
	padding: 0px;
}

@keyframes glowSuccess {
	0%   { box-shadow: 0 0 0px transparent; }
	50%  { box-shadow: 0 0 15px #28a745; }
	100% { box-shadow: 0 0 8px #28a745; }
}


/* Ícono flotante del carrito */
#carritoFlotante, #iconoCarritoFlotante {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 9999;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	font-size: 24px;
	background-color: #ff4081;
	color: #fff;
	border: none;
	transition: background 0.3s ease;
}

#carritoFlotante:hover {
	background-color: #e73370;
}

/* Contador del carrito */
#contadorCarrito {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: #fff;
	color: #ff4081;
	font-size: 12px;
	font-weight: bold;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Modal lateral del carrito */
.modal-carrito {
	position: fixed;
	top: 0;
	right: -100%;
	width: 350px;
	height: 100%;
	background-color: #fff;
	box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
	z-index: 9998;
	transition: right 0.3s ease-in-out;
	display: flex;
	flex-direction: column;
}

.modal-carrito.abierto {
	right: 0;
}

/* Contenido del modal */
.modal-carrito-contenido {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
	position: relative;
}

.cerrar-modal {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	color: #999;
	cursor: pointer;
}

/* Toast dentro del modal */
#toast-carrito {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 10px 15px;
	border-radius: 6px;
	font-size: 14px;
	z-index: 10000;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Contenido del carrito */
#contenidoCarrito {
	margin-top: 15px;
}

.item-carrito {
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

.total-carrito {
	font-weight: bold;
	font-size: 18px;
	text-align: right;
	margin-top: 10px;
}

.btn-finalizar {
	margin-top: 20px;
	width: 100%;
	padding: 10px 20px;
	background-color: #ff4081;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

.btn-finalizar:hover {
	background-color: #e73370;
}

/* Controles de cantidad */
.cantidad-controles {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 8px 0;
}

.cantidad-controles input {
	width: 40px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 3px;
}

.btn-cantidad {
	background: #ddd;
	border: none;
	padding: 5px 10px;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
}

.btn-cantidad:hover {
	background: #ccc;
}

/* Botón eliminar */
.btn-eliminar-item {
	background: #f44336;
	color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	margin-top: 5px;
}

.btn-eliminar-item:hover {
	background: #d32f2f;
}

.item-carrito-contenido {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.miniatura-producto {
	width: 80px;
	height: 80px;
	object-fit: cover;
	cursor: pointer;
	border-radius: 6px;
}

.detalle-producto {
	flex: 1;
}


.visual-metodos {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: space-between;
	margin-top: 20px;
}

.visual-metodos label {
  flex: 1 1 calc(48%);
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1px;
  text-align: center;
  transition: all 0.2s ease;
  background-color: #fff;
  color: #333;
}

.opcion-pago {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.opcion-pago i,
.opcion-pago svg {
  font-size: 24px;
  margin-bottom: 8px;
  color: #555;
  transition: color 0.2s ease;
}

.metodos-pago input[type="radio"] {
  display: none;
}

.metodos-pago input[type="radio"]:checked + .opcion-pago {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
  border-radius: 8px;
}

.metodos-pago input[type="radio"]:checked + .opcion-pago i,
.metodos-pago input[type="radio"]:checked + .opcion-pago svg {
  color: #fff;
}

.opcion-pago.activo {
  background-color: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
  padding: 15px;
}

.opcion-pago.activo i,
.opcion-pago.activo svg {
  color: #fff !important;
}

.producto-lista {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 10px;
  background: #fafafa;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: background 0.2s;
}

.producto-lista:hover {
  background: #f0f0f0;
}

.producto-lista img {
  width: 55px;
  height: 55px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 15px;
  flex-shrink: 0;
}

.producto-lista .info {
  flex-grow: 1;
}

.producto-lista .info h6 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.producto-lista .info small {
  color: #777;
}

.producto-lista .acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.producto-lista input[type="number"] {
  width: 60px;
  padding: 4px 6px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.producto-lista button {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  background-color: #28a745;
  color: white;
  border: none;
  transition: background 0.2s;
}

.producto-lista button:hover {
  background-color: #218838;
}

/* Alinear horizontalmente en el centro (a mitad del ancho del content-wrapper) */
.btnOcultarBarra,
.btnMostrarBarra,
.btnMostrarRecomendaciones,
.btnOcultarRecomendaciones {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

/* Para separar visualmente si querés uno a la izquierda y otro a la derecha */
.btnMostrarRecomendaciones,
.btnOcultarRecomendaciones {
  left: calc(50% - 60px); /* Corre a la izquierda */
}
.btnMostrarBarra,
.btnOcultarBarra {
  left: calc(50%); /* Corre a la derecha */
}

.boton-flotante-central {
  position: absolute;
  left: calc(50% + 25px); /* Compensemos los 50px del menú */
  transform: translateX(-50%);
  z-index: 999;
  margin-top: 10px;
}


#verPdfRecomendaciones {
  font-size: 3rem;
  margin: 50px auto;
  display: block;
}


/* ==========================================================
   MÓDULO: Precio Profesional por Especialidad (pprof)
   ========================================================== */

.pprof-card {
  border: 1px solid #e7e7ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10,12,20,.04);
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow .2s ease;
}

.pprof-card:hover {
  box-shadow: 0 2px 8px rgba(10,12,20,.1);
}

/* ==================== Imagen ==================== */
.pprof-card-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: #f5f6f8;
}

/* ==================== Cuerpo ==================== */
.pprof-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pprof-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #151922;
  line-height: 1.25;
}

/* ==================== Precios ==================== */
.pprof-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  flex-wrap: wrap;
}

/* orden garantizado */
.pprof-price { font-weight: 500; }
.pprof-price b { font-weight: 700; }

.pprof-price--pro {
  order: 1;
  color: #0d9b74; /* verde pro */
}

.pprof-price--pub {
  order: 2;
  color: #444;
}

/* ==================== Chips ==================== */
.pprof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pprof-chip {
  appearance: none;
  border: 1px solid #d7dbe5;
  background: #fff;
  color: #2a2f3a;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s ease;
}

.pprof-chip:hover {
  background: #f7f9fc;
  border-color: #cfd6e4;
}

/* Activa */
.pprof-chip.is-active {
  background: #0d9b74;
  border-color: #0d9b74;
  color: #fff;
}

.pprof-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0c7d6;
  display: inline-block;
}

.pprof-chip.is-active .pprof-chip-dot {
  background: #fff;
}

/* ==================== Estado Guardando ==================== */
.pprof-savehint {
  font-size: 12px;
  color: #6b7280;
  display: none;
  margin-top: 4px;
}

.pprof-card.saving {
  opacity: .85;
  transition: opacity .15s ease;
}

.pprof-card.saving .pprof-savehint {
  display: inline-block;
}

/* ==================== Vista JSON opcional ==================== */
.pprof-jsonview {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  border-radius: 6px;
  color: #111827;
}

.pprof-bulkbar{
  border: 1px dashed #cfd6e4;
  border-radius: 12px;
  padding: 12px;
  background: #f9fbfd;
  margin: 12px 0 18px;
}
.pprof-bulkbar-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pprof-bulkbar-title{
  font-weight: 600;
  color: #2a2f3a;
  margin-right: 6px;
}
.pprof-bulkhint{ font-size: 13px; color: #6b7280; margin-left: 8px; }


/* ==================== Responsive ==================== */
@media (max-width: 768px) {
  .pprof-card-media img {
    height: 180px;
  }

  .pprof-prices {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .pprof-title {
    font-size: 15px;
  }

  .pprof-chip {
    font-size: 12px;
    padding: 6px 10px;
  }
}



/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){
	
	#full-menu{

		height: -webkit-fill-available;
	}


}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){
	
	#full-menu{

		height: -webkit-fill-available;
	}


}

/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width:767px) and (min-width:521px){

	#full-menu {
        overflow-y: auto !important;
        padding-bottom: 20px;
    }

    #full-menu .wrap {
        flex-direction: column;
        height: auto;
        align-items: stretch;
    }

    #full-menu .wrap .navegacion {
        overflow-y: auto;
        max-height: 55vh;
		margin-top: 55px;

    }

    .subcat-list {
        max-height: none; /* dejar que la lista crezca según el contenido */
        overflow: visible;
        padding: 0 15px;
    }

	.menuPequeño li:first-child {
		margin-bottom: 20px;
	}

	#galeriaCategorias{
		padding: 0px 30px;
	}
	.principio-card{
   	 	display: inline;

	}

	.principio-card img {
		width: 100%;

	}

}


@media (max-width:520px){

	#full-menu{

		height: -webkit-fill-available;
	}

	#full-menu .wrap .navegacion{

		text-align: center;

	}

	#full-menu .navegacion{

		text-align: center;
		margin-top: 55px;
		font-size: 20px;
		justify-content: center;
		
	}

	#full-menu .wrap .botones{

		display: none;

	}

	#full-menu .menu-text{

		display: none;

	}

	#full-menu .menuPequeño{

		display: block;

	}

	#full-menu .navegacion ul li a{

		color: #fff;
		line-height: normal;
	}

	.menuPequeño li:first-child {
		margin-bottom: 20px;
	}

	#galeriaCategorias{
		padding: 0px 30px;
	}

	.principio-card{
   	 	display: inline;

	}

	.principio-card img {
    	width: 100%;

	}


}

  
  @media (max-width: 768px) {
	#contenedorProductos {
	  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
	}
  }
  
  
  @keyframes zoomIn {
	from { transform: scale(0.8); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
  }
  
  
  
  @keyframes fadeIn {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }