#progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

#progress-container p {
    display: none;
}

#progress-container #mensaje-final {
    display: block;
}

.mensaje-final {
    color: #000000;
    font-weight: bold;
    font-family: Cardo;
    text-align: center;
    margin-top: 20px;
}

.progress {
    width: 80%;
    height: 30px;
    background-color: #adadad;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 2s ease;
    overflow: hidden;
}

.bar-animation {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.5) 25%,
            /* más opaco */
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.5) 50%,
            /* más opaco */
            rgba(255, 255, 255, 0.5) 75%,
            /* más opaco */
            transparent 75%,
            transparent);
    background-size: 20px 20px;
    pointer-events: none;
    animation: move-gradient 8s linear infinite;
}

@keyframes move-gradient {
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: 100%;
    }
}

#progress-text {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.rodillo {
  display: inline-block;
  margin: 10px;
  text-align: center;
}

.rodillo-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.rodillo-caja {
  width: 80px;
  height: 100px; /* visor: muestra solo uno completo */
  overflow: hidden;
  position: relative;
  /*border: 2px solid #333;*/
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.rodillo-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease-out;
}

.rodillo-num {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #444;
  border-radius: 6px;
  background-color: #fff;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}