:root {
  --c-aa8744: #aa8744;
  --c-363636: #363636;
  --c-fdfbf3: #fdfbf3;
  --c-d1bc97: #d1bc97;
  --c-9c642d: #9c642d;
}

/* Estilos base */
.bg-fondo-principal {
  background-color: var(--c-fdfbf3);
}

.text-color-principal {
  color: var(--c-aa8744);
}

.bg-color-principal {
  background-color: var(--c-aa8744);
}

.border-color-principal {
  border-color: var(--c-aa8744);
}

.text-color-texto-oscuro {
  color: var(--c-363636);
}

.text-color-secundario {
  color: var(--c-9c642d);
}

.text-color-blanco {
  color: white;
}

.border-color-borde-input {
  border-color: var(--c-d1bc97);
}

.hover\:bg-color-principal-oscuro:hover {
  background-color: var(--c-9c642d);
}

.hover\:bg-fondo-principal:hover {
  background-color: var(--c-fdfbf3);
}

.ring-color-principal {
  --tw-ring-color: var(--c-aa8744);
}

.accent-color-principal {
  accent-color: var(--c-aa8744);
}

.relative.flex.size-full.min-h-screen {
  min-height: 100vh;
}

/* Estilos para los estados de los botones */
.btn-agregar-carrito:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-agregar-carrito:disabled:hover {
  background-color: var(--c-aa8744);
}

/* Corazón de wishlist */
.btn-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: white;
  color: var(--c-9c642d);
  cursor: pointer;
}

.btn-wishlist .material-symbols-outlined {
  font-size: 20px;
}

.btn-wishlist.active {
  background: var(--c-aa8744);
  color: white;
}

/* Transiciones suaves */
.producto-card {
  transition: all 0.3s ease;
}

/* Paginación */
.paginacion-btn {
  padding: 8px 16px;
  border: 1px solid var(--c-d1bc97);
  border-radius: 6px;
  background-color: white;
  color: var(--c-363636);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}

.paginacion-btn:hover:not(.paginacion-btn-active):not(:disabled) {
  background-color: var(--c-fdfbf3);
  border-color: var(--c-aa8744);
}

.paginacion-btn-active {
  background-color: var(--c-aa8744);
  color: white;
  border-color: var(--c-aa8744);
}

.paginacion-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.paginacion-info {
  color: var(--c-363636);
  font-size: 14px;
  margin: 0 16px;
}

.paginacion-ellipsis {
  padding: 8px 12px;
  color: var(--c-363636);
}