/* 🎛️ Input de cantidad + botones + alineación */
.cantidad-input {
  max-width: 60px;
  text-align: center;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
}

.restar-cantidad,
.sumar-cantidad {
  width: 28px !important;
  height: 28px !important;
  font-size: 16px;
  border-radius: 50% !important;
  padding: 0 !important;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 🖤 Precio en negro */
.card-text.precio {
  color: #000 !important;
}

/* Estilo normal del botón */
.agregar-carrito {
  background-color: #0e31a1; /* Verde personalizado */
  border-color: #0c34a1;
  color: white;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Estilo cuando el mouse pasa por encima */
.agregar-carrito:hover {
  background-color: #d83908; /* Verde más oscuro */
  border-color: #d83908;
  color: white;
}


/* ⛔ Ocultar flechas del input numérico en Chrome */
.cantidad-input::-webkit-inner-spin-button,
.cantidad-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 📱 Responsividad en pantallas pequeñas */
@media (max-width: 576px) {
  #catalogoProductos .card-img-top {
    height: 180px;
  }

  .card-body {
    padding: 0.75rem;
  }

  .marca-estilo {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
  }

  .restar-cantidad,
  .sumar-cantidad {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .cantidad-input {
    max-width: 50px;
    font-size: 0.8rem;
  }

  .agregar-carrito {
    font-size: 0.85rem;
  }
}

/* 💻 Responsividad en tablet */
@media (min-width: 577px) and (max-width: 991px) {
  .restar-cantidad,
  .sumar-cantidad {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .cantidad-input {
    font-size: 0.85rem;
  }

  .agregar-carrito {
    font-size: 0.9rem;
  }
}