.cargando {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
}

.cargando > div {
    width: 10px;
    height: 10px;
    background: var(--color-highlight);
    border-radius: 50%;
    margin: 3px;
}

.bola1 {
    animation: bola1 2s infinite;
}

.bola2 {
    animation: bola2 2s infinite;
}

.bola3 {
    animation: bola3 2s infinite;
}

@keyframes bola1 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bola2 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes bola3 {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.cargando > label {
    color: var(--color-textonormal);
    animation: textoProgreso 2s infinite;
    margin-left: 10px;
}

@keyframes textoProgreso {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.alineacionVertical {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}