.blue {

      background-color: #f9f9f9;
  }

  .product-features h3 {
      font-size: 1.3em;
      color: #333;
      margin-bottom: 10px;
      border-bottom: 2px solid #007bff;
      padding-bottom: 5px;
      display: inline-block;
  }

  .product-features .list-group {
      margin-bottom: 0;
  }

  .product-features .list-group-item {
      background-color: transparent;
      border: none;
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9em;
      border-bottom: 1px solid #e0e0e0;
  }

  .product-features .list-group-item:last-child {
      border-bottom: none;
  }

  .product-features .list-group-item strong {
      color: #274380;
  }

  .product-features .list-group-item span {
      color: #555;
  }

  .product-features .row {
      margin-bottom: 0;
  }

  .product-features .col-md-6 {
      margin-bottom: 10px;
  }

  .product-features .col-md-6:last-child {
      margin-bottom: 0;
  }






  .product-card {
      border: 1px solid #ddd !important;
      border-radius: 30px !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 20px;
      padding: 15px;
  }

  .product-card:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      transform: translateY(-5px);
  }

  .product-image-container {
      position: relative !important;
      width: 100% !important;
      overflow: hidden !important;
  }

  .product-image-container img {
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease;
  }

  .product-card:hover .product-image-container img {
      transform: scale(1.05);
  }


  .product-details {
      text-align: left;
      margin-top: 15px;
  }

  .product-titles a {
      color: #274380;
      font-size: 1.25em;
      text-decoration: none;
  }

  .product-titles a:hover {
      color: #007bff;
  }

  .ratings-container {
      margin: 10px 0;
  }

  .product-container {
      margin: 3px 0;
  }

  .product_status {
      font-weight: bold;
      cursor: pointer;
  }

  .stock-quantity {
      margin-top: 5px;
  }

  .price-box {
      font-size: 1.5em;
      margin: 10px 0;
  }

  .product-features h3 {
      margin-top: 20px;
      margin-bottom: 15px;
  }

  .list-group-item {
      border: none;
      padding: 5px 0;
  }

  .product-action {
      text-align: center;
      margin-top: -10px;
  }




  .add-cart {
      background-color: #128c7e;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      transition: background-color 0.3s ease;
  }

  .add-cart:hover {
      background-color: #0056b3;
  }

  .add-cart:disabled {
      background-color: #ce4545;
      cursor: not-allowed;
  }





  .fondo-filtro {
      border: 1px solid #274380;
      border-radius: 5px;
      padding: 20px;
      background-color: #274380;
      color: white !important;


  }


  .fondo-filtros {
      border: 5px solid #274380;
      border-radius: 12px;
      padding: 1px;
      background-color: #274380;
  }



  .tamano {
      font-size: 15px !important;
      font-weight: bold;
      white-space: nowrap;
      /* Evita que el texto se rompa en varias líneas */
      margin-top: 20px;
      margin-left: -4px;
      color: white;
      text-align: center;


  }

  .llames {
      align-items: center;
  }

  .pdf-responsive{
    position: relative; top: -670px; left: -35px; cursor: pointer;
  }


  /* Estilos para móviles y móviles pequeños */
  @media (max-width: 767px) {
      .tamano {
          font-size: 18px !important;
          font-weight: bold;
          white-space: nowrap;
          /* Evita que el texto se rompa en varias líneas */
      }

      .btn-8 {
          position: relative;
          top: -85px !important;
          left: -170px;

      }

      .form-carrito {
          position: relative;
          /* ← esto es lo que falta */
          top: -25px;
          /* mueve hacia arriba */
          left: 170px;
          /* mueve hacia la derecha */
      }

      .pdf-responsive {
          position: relative;
          /* ← esto es lo que falta */
          top: -170px;
          /* mueve hacia arriba */
          left: -25px;
          /* mueve hacia la derecha */
      }
  }


















  /* para las celdas se iluminen*/
  /* Estilo para iluminar las filas */
  .highlight {
      background-color: yellow !important;
      transition: background-color 0.3s ease !important;
  }

  .iluminado {
      background-color: yellow !important;
  }

  /* para las celdas se iluminen*/




  .quantity-wrapper {
      display: flex;
      align-items: center;
      gap: 5px;
      /* Espacio entre el input y el texto */
  }

  .quantity-wrapper input[type="number"] {
      width: 60px;
      /* Ajusta el tamaño del input */
      text-align: center;
      /* Centra el texto dentro del input */
      padding: 5px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px;
  }

  .quantity-wrapper span {
      font-size: 14px;
      color: #000;
      /* Cambia el color si lo necesitas */
  }




  /* Estilo para el input deshabilitado */
  input[type="number"]:disabled {
      cursor: not-allowed;
      /* Cambia el cursor a prohibido */
      background-color: #f5f5f5;
      /* Fondo gris claro */
      color: #ccc;
      /* Texto gris claro */
      border: 1px solid #ddd;
  }

  /* Estilo para el botón deshabilitado */
  button[disabled] {
      cursor: not-allowed;
      /* Cambia el cursor a prohibido */

      border: none;
      /* Sin borde */
  }



  /* para que se bloque las cantidades a agregar */










  /* Aqui empieza el codigo del boton circular. */
  .boton-slide-circular {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 50px;
      background: #fdfdfd;
      line-height: 50px;
      padding: 0;
      border-radius: 50px;
      border: 2px solid #1EAB2D;
      margin-top: 10px;
      -webkit-transition: .5s;
      transition: .5s
  }

  .boton-slide-circular .slide-icono {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      float: left;
      width: 40px;
      height: 40px;
      background-color: #1EAB2D;
      color: #fff;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      margin: 3px;
      -webkit-transition: .5s;
      -moz--transition: .5s;
      -o-transition: .5s;
      transition: .5s;
  }



  .boton-slide-circular .slide-texto {
      position: absolute;
      left: 58px;
      right: 20px;
      /* Espacio adicional para el texto */
      color: #039412e3;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      /* Evita que el texto se divida */
      overflow: hidden;
      /* Oculta el texto que no cabe */
      text-overflow: ellipsis;
      /* Agrega puntos suspensivos si el texto es demasiado largo */
      -webkit-transition: .5s;
      -moz-transition: .5s;
      -o-transition: .5s;
      transition: .5s;
  }

  .boton-slide-circular:hover {
      background-color: #039412e3;
  }

  .boton-slide-circular:hover .slide-icono {
      left: 100%;
      background-color: #fdfdfd;
      color: #63B1D0;
      margin-left: -45px;
  }

  .boton-slide-circular:hover .slide-texto {
      left: 20px;
      color: #fff;
  }

  /* Estilos para dispositivos móviles */
  @media only screen and (max-width: 600px) {
      .boton-slide-circular .slide-texto {
          font-size: 10px;
          /* Reducir el tamaño del texto */
          left: 48px;
          /* Ajustar la posición del texto */
          right: 10px;
          /* Espacio adicional para el texto */
      }
  }