/* Carousel container */
.carrusel-inicio {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carrusel-contenedor {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carrusel-slide {
  flex: 0 0 100%;
  height: auto;
}

.carrusel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Deshabilitar interacción con la imagen */
}

/* Navigation buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  /* Tamaño de los botones */
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  /* Más transparente */
  border: none;
  /* Sin borde */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* Sin cambio de tamaño */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* Añadir sombra */
}

.carousel-btn:hover {
  background-color: rgba(255, 255, 255, 0.7);
  /* Cambio de color más sutil */
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

/* Responsive styles */
@media (max-width: 767px) {
  .carrusel-slide {
      flex-basis: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .carrusel-slide {
      flex-basis: 50%;
  }
}

@media (min-width: 1024px) {
  .carrusel-slide {
      flex-basis: 33.33%;
  }
}

  /* Contenedor principal del contenido */
  .main-content {
      position: relative;
      display: flex;
      align-items: flex-start;
  }

  /* Nuevo fondo */
  .background-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, #ffffff 0%, #deedfd 90%);
  }

  .carrusel-inicio {
      width: 98.9vw;
      height: 400px;
      overflow: hidden;
      position: relative;
      user-select: none;
      touch-action: pan-y;
  }

  .carrusel-contenedor {
      display: flex;
      transition: transform 0.3s ease-out;
      cursor: grab;
      width: 100.82%;
      height: 100%;
      gap: 0;
      /* Sin espacio entre slides */
  }

  .carrusel-contenedor.grabbing {
      cursor: grabbing;
  }

  .carrusel-slide {
      flex: 0 0 100%;
      min-width: 100%;
      /* Asegura que el slide tome el ancho completo */
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      color: white;
      position: relative;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
  }


  .carousel-indicators {
      position: absolute;
      bottom: 20px;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      z-index: 10;
  }

  .indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: background-color 0.3s;
  }

  .indicator.active {
      background: rgb(0, 0, 0);
  }

  /* Responsivo para tablets */
  @media (max-width: 768px) {
      .carrusel-inicio {
          height: 200px;
      }

      .carrusel-slide {
          font-size: 1.5rem;
          background-size: cover;
          /* Asegura que la imagen cubra el contenedor */
          background-position: center;
      }
  }

  /* Responsivo para móviles */
  @media (max-width: 480px) {
      .carrusel-inicio {
          height: 100px;
      }

      .carrusel-slide {
          font-size: 1rem;
          background-size: cover;
          background-position: center;
      }
  }





/* Comienzo de CSS de la Pagina Web*/
.container {
  display: flex;
  gap: 10px;
  padding: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.left-box {
  width: 260px;
  min-height: 100px; /* Altura mínima para cuando hay poco contenido */
  max-height: 800px; /* Altura máxima para scroll si hay mucho contenido */
  border: 1.5px solid #3269d7;
  padding: 10px;
  overflow-y: auto; /* Permite scroll si el contenido es muy largo */
  height: fit-content; /* Se adapta al contenido */
}

.right-box {
  flex: 1;

  min-height: 600px;
}

.top-section {
  min-height: 40px; /* Altura mínima */
  height: auto; /* Se ajusta automáticamente al contenido */
  padding: 0px;
  margin: 0;
  overflow: auto; /* Evita el desbordamiento del contenido */
}

/* Dentro de CSS de left-box */

.categories-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  padding: 5px 0;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.category-item span {
  color: #999;
  margin-left: 3px;
}

.expandable {
  position: relative;
  padding-right: 20px;
}

.expandable::after {
  content: "▼";
  font-size: 10px;
  color: #999;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Ocultar subcategorías por defecto */
.subcategory-list {
  display: none;
  padding-left: 20px; /* Indentación para subcategorías */
}

.subcategory-list li {
  padding: 3px 0;
  font-size: 13px;
  color: #555;
}

/* Clase para mostrar subcategorías */
.show {
  display: block;
}

.category-content {
  display: inline-flex;
  align-items: center;
  word-break: break-word; /* Permite que las palabras largas se rompan */
}


/* Comienzo de CSS de right-box */

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #fff;
  }
  
  .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .select-control {
    padding: 0.5rem 5rem 0.5rem 0.75rem;
    border: 1px solid #1d70dd;
    border-radius: 0.375rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    appearance: none;
    color: #1d1d1d;
    font-size: 0.875rem;
    line-height: 1.2rem;
  }
  
  .select-small {
    width: 5rem;
    color: #1a1a1a;
  }
  
  .view-toggles {
    display: flex;
    gap: 0.25rem;
  }
  
  .view-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    border: 1px solid #3269d7;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #3269d7;
    cursor: pointer;
  }
  
  .view-toggle:hover {
    background-color: rgb(134, 176, 238);
  }
  
  .view-toggle.active {
    background-color: rgb(134, 176, 238);
    color: #0a54e9;
  }
  
  @media (max-width: 768px) {
      
    .left-box {
  position: absolute;
  width: 260px;
  min-height: 100px; /* Altura mínima para cuando hay poco contenido */
  max-height: 800px; /* Altura máxima para scroll si hay mucho contenido */
  border: 1.5px solid #3269d7;
  padding: 10px;
  overflow-y: auto; /* Permite scroll si el contenido es muy largo */
  height: fit-content; /* Se adapta al contenido */
  z-index: 1  ;
  background-color: white;
}

    .filter-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
  
    .filter-group {
      width: 100%;
      justify-content: space-between;
    }
  
    .select-control {
      width: 100%;
    }
  
    .select-small {
      width: auto;
    }
  }


/* Comienzo de CSS de top-box */

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.producto {
  padding: 15px;
  text-align: center;
  transition: transform 0.3s ease;
  position: relative; /* Para posicionamiento del botón */
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.producto:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.producto img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.producto h3 {
  font-size: 14px;
  margin: 10px auto;
  color: #333;
  height: 70px;
  overflow: hidden;
}

.precio {
  font-size: 18px;
  font-weight: bold;
  color: #2c5282;
  margin: 10px 10px 30px;
}

.btn-agregar {
  position: absolute;
  bottom: -50px; /* Inicialmente oculto debajo del producto */
  left: 0;
  right: 0;
  background-color: #4c6baf;
  color: white;
  padding: 10px;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: bottom 0.3s ease;
}

.producto:hover .btn-agregar {
  bottom: 0; /* Se muestra al hacer hover */
}

.producto-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.producto-link:hover {
  opacity: 0.9;
}