/*Otros estilos para la tienda, pueden se adaptados al inicio*/
.categorias-scroll-container {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 15px 5px;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 99;
        border-bottom: 1px solid #f0f0f0;
    }
    .categorias-scroll-container::-webkit-scrollbar { display: none; }

    .btn-seccion {
        display: inline-block;
        border: 1px solid #e0e0e0;
        border-radius: 50px;
        padding: 8px 20px;
        margin-right: 8px;
        color: #555;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.2s;
        font-weight: 500;
        user-select: none;
    }
    .btn-seccion:hover { background-color: #f8f9fa; }
    
    .btn-seccion.activo {
        background-color: #0d6efd;
        color: white;
        border-color: #0d6efd;
        box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
    }

    /* Ajuste Card Producto */
    .card-producto {
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .card-producto:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }





.nover{display: none;}

.registro{
    background-color: aqua;
     margin-top: 4px;
     padding-left: 10px;
     font-size: smaller;
     border-radius: 5px;
}
.documento{ 
    border-radius: 5px;
    font-size: small;
    font-weight: bold;
    /*background-color: #0275d8;*/
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;;
   
    /*box-shadow: 3px 3px red, -1em 0 0.4em rgb(22, 22, 0);*/
    box-shadow: 4px 4px 4px 5px #999;
    margin-top: 60px;
}
li, a{
    list-style-type: none;
    text-decoration: none;
}
.negocio{font-size: medium;}
.minimo{font-size: smaller; font-weight: 200; font-family: Verdana, Geneva, Tahoma, sans-serif;}
.borrar, .Rojo{color: red;}
.nover{display: none;}
.titulo{font-size: 30px;}
.subtitulo{font-size: large; font-weight: bolder; font-family: Verdana, Geneva, Tahoma, sans-serif;}
.telefono{font-size: 18px;}
.direccion{font-size: 15px; font-weight: 600;}

.galeria{float: left; margin: 15px; background-color: #999; width: 320px; height: auto; margin-top: 40px; border-radius: 7px;}

.galeria_reducida {
  padding: 10px;
  margin-bottom: 15px;
  /* max-height: 550px; /* Ajusta según tu diseño */
  
 /* overflow: hidden; */
}

.galeria_reducida .imagen img {
  height: auto;
  max-height: 60% !important; /* Reduce en un 40% aprox. respecto al tamaño normal */
  width: auto;
  object-fit: contain;

}



figure{margin-top: 25px;}
figcaption{padding: 5px; margin-left: 10px;}
img{border: 2px; border-radius: 5px;}
#carrito{background-image: url(vistas/img/iconos/cart4.svg); color: red;}
.precio{font-size: large; background-color: black; color: #fff; border-radius: 5px; margin-left: 20px; margin-right: 20px; padding-top: 7px; padding-bottom: 7px;}
/*.precio a {
    color: #fff;
  }*/
.presentacion{font-size: 12px;} 
.cantidad_producto, .descripcion{margin-left: 20px; margin-right: 20px; padding-top: 7px; padding-bottom: 7px; text-align: justify; font-size: smaller;}
.cantidad_cargada{border-radius: 5px; margin-left: 20px;
     margin-right: 20px; padding-top: 3px; padding-bottom: 3px; margin-top: 4px; color: black; font-weight: bolder; padding-left: 10px;}
#respuesta_cuenta{background-color: red; margin: 10px; border-radius: 5px;}
#totalizar, #total{color: green; font-size: large;}
#notificacion{background-color: red; width: auto; margin: 2px; height: auto; border-radius: 3px;  }

#menu_secundario{margin-top: 1px; position: fixed; z-index: 1; border-radius: 5px;}
.red{color: red; font-size: medium;}
.green{color: green; font-size: medium;}


.galeria {
    float: left;
    margin: 15px;
    background-color: #bbb;
    width: 320px;
    height: 600px; /* Altura fija */
    margin-top: 40px;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* overflow: hidden; */
}

.descripcion {
    max-height: 300px; /* Ajusta la altura según necesites */
    overflow-y: auto; /* Agrega barra de desplazamiento vertical si el contenido excede */
    padding: 7px; /* Más espacio alrededor del texto */
    text-align: justify;
    font-size: smaller;
    border-top: 1px solid #ccc; /* Se corrigió el error de escritura */
    line-height: 1.6; /* Aumenta el espacio entre líneas */
    letter-spacing: 0.5px; /* Aumenta el espacio entre letras */
   padding-top: 20px;
}

.imagen img {
    width: 95%; /* Ajusta el ancho al 100% del contenedor */
    height: 250px; /* Altura fija */
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformarse */
    border-radius: 5px;
   
}


.carousel-indicators [data-bs-target] {
  background-color: black;
}
.carousel-indicators .active {
  background-color: black;
}

.carousel-container {
    width: 30%;
    margin: 0 auto;
  }


  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      background-image: none; /* Quita la flecha blanca predeterminada */
      width: 2rem;
      height: 2rem;
      background-color: black; /* Fondo negro */
      mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
  }
  
  .carousel-control-next-icon {
      mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  }
  


  .fondo{background-color: #bbb; height: 60px; padding-top: 15px; border-radius: 5px; margin-top: 4px;}
  .carousel-item img {
    max-height: 40vh;
    max-width: 50%;
    margin: 0 auto;
    display: block;
    /*background-color: #ccc;*/
  }


  .carousel-inner,
.carousel-item {
    height: 60vh; /* o puedes usar 400px, lo que prefieras */
}

.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* llena el espacio sin deformarse */
    object-position: center;
    object-fit: contain;

}

  
  @media (max-width: 768px) {
    .carousel-item img {
      max-height: 30vh;
      max-width: 90%;
    }
  }
  
  @media (max-width: 480px) {
    .carousel-item img {
      max-height: 25vh;
      max-width: 95%;
    }
  }