.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;

  color: var(--cor-primaria);
  font-weight: 700;
}

.progress-bar-percent {
  font-size: 28px;
}

.progress-bar {
  height: 24px;
  width: 264px;

  display: flex;
  align-items: center;
  border-radius: 8px;

  background-color: var(--cor-borda-principal);

  position: relative;
  overflow: hidden;
}

.progress-track {
  height: 100%;
  background-color: var(--cor-primaria);
  border-radius: 8px 0 0 8px;
  transition: width 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sombra-primaria-md);
}

.progress-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    127deg,
    #2782f7 0px,
    #2782f7 12px,
    transparent 12px,
    transparent 24px
  );
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
  opacity: 0.5;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes shimmer {
  0% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(30%);
  }
}

.progress-bar-pending {
  font-size: 16px;
}

@media (max-width: 524px) {
  .progress-bar {
    width: 100%;
  }

  .tickets-container,
  .tickets-content,
  .tickets-container span {
    font-size: 14px;
  }

  .progress-track::before {
    background-image: repeating-linear-gradient(
      122deg,
      #2782f7 0px,
      #2782f7 12px,
      transparent 12px,
      transparent 24px
    );

    animation: shimmer 4s linear infinite;
  }
}