/* EasyProgreso: barra de progreso lineal. Solo tokens --easy-* con valores por omisión. Esquinas: ningún radio fijo, todo sale de --easy-radio-base. */

.easy-progreso-caja { width: 100%; }

.easy-progreso {
    position: relative;
    width: 100%;
    height: var(--easy-progreso-alto, 8px);
    overflow: hidden;
    background: color-mix(in srgb, var(--easy-color-primario, #940404) 15%, transparent);
    border-radius: calc(var(--easy-radio-base, 8px) * .5);
}

.easy-progreso-barra {
    height: 100%;
    background: var(--easy-color-primario, #940404);
    border-radius: inherit;
    transition: width .2s ease-out;
}

.easy-progreso.indeterminado .easy-progreso-barra {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    transition: none;
    animation: easy-progreso-indeterminado 1.2s ease-in-out infinite;
}

@keyframes easy-progreso-indeterminado { 0% { left: -35%; } 100% { left: 100%; } }

.easy-progreso-etq {
    display: block;
    margin-top: 8px;
    text-align: center;
    color: var(--easy-color-texto-tenue, #6b7280);
}

/* Sin movimiento la barra indeterminada queda llena y atenuada para que se lea como "en proceso" */
@media (prefers-reduced-motion: reduce) {
    .easy-progreso.indeterminado .easy-progreso-barra { animation: none; width: 100%; opacity: .45; }
}

/* ---------- EasySpinner: anillo giratorio ---------- */

.easy-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.easy-spinner.centrado { width: 100%; min-height: 220px; }

.easy-spinner-giro {
    box-sizing: border-box;
    width: var(--easy-spinner-tamano, 40px);
    height: var(--easy-spinner-tamano, 40px);
    border: calc(var(--easy-spinner-tamano, 40px) / 10) solid color-mix(in srgb, var(--easy-color-primario, #940404) 20%, transparent);
    border-top-color: var(--easy-color-primario, #940404);
    border-radius: 50%;
    animation: easy-spinner-gira .8s linear infinite;
}

@keyframes easy-spinner-gira { to { transform: rotate(360deg); } }

.easy-spinner-txt { color: var(--easy-color-texto-tenue, #6b7280); }

@media (prefers-reduced-motion: reduce) {
    .easy-spinner-giro { animation-duration: 2s; }
}