.redi2 {
    --color__opcion1: transparent;
    --color__opcion2: transparent;
    --color__opcion3: transparent;
    --color__opcion4: transparent;

    --componente__anchoMaximo: 200px;
    --componente__anchoMinimo: 130px;
    --componente__ancho: 25%;
    --componente__espacio: 10px;

    --componenteDestino__ancho: 50%;

    --contenedoresDestino__colorFondo: hsl(48, 96%, 93%);
    --contenedoresDestino__ancho: 25%;
    --espacioEntreContenedores: 10px;

    --color__contenedorA: #b6deff;

    --color__contenedorB: #ffccde;

    --color__contenedorC: #d9f8ff;

    --color__contenedorD: #ffdabb;

    --flexFlow__componente: column;

    --fontFamily__contenedorTitulo: 'Barmeno', sans-serif;

    font-size: 20px;
    max-width: 1200px !important;
}

/*=== ORIGEN ===*/

.redi2 .listaComponentes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
    z-index: 2;
    max-width: 1000px;
    margin: 10px auto;
}

.redi2 .componente {
    cursor: pointer;
    line-height: 1.15;
    transition: transform 0.1s;
    max-width: var(--componente__anchoMaximo);
    width: calc(var(--componente__ancho) - var(--componente__espacio) * 2);
    min-width: var(--componente__anchoMinimo);
    margin: var(--componente__espacio);
    z-index: 50;
    border-radius: 1em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    flex-flow: var(--flexFlow__componente);
    cursor: url(../img/cursor-grab.cur), url(../img/cursor-grab.png), pointer;
    transition: transform .3s;
}


.redi2 .componentesDestino__contenedor .componente {
    width: calc(var(--componenteDestino__ancho) - var(--componente__espacio) * 2);
    transform: scale(1.3);
}

.redi2 .ui-sortable-helper {
    transition: transform .3s;
    cursor: url(../img/cursor-grabbing.cur), url(../img/cursor-grabbing.png), move;
    transform: scale(.8);
    z-index: 9;
}

.redi2 .listaComponentes .componente:nth-child(4n + 1),
.redi2 .contenedorA .componente:nth-child(4n + 1),
.redi2 .contenedorB .componente:nth-child(4n + 1) {
    background-color: var(--color__opcion1);
}

.redi2 .listaComponentes .componente:nth-child(4n + 2),
.redi2 .contenedorA .componente:nth-child(4n + 2),
.redi2 .contenedorB .componente:nth-child(4n + 2) {
    background-color: var(--color__opcion2);
}

.redi2 .listaComponentes .componente:nth-child(4n + 3),
.redi2 .contenedorA .componente:nth-child(4n + 3),
.redi2 .contenedorB .componente:nth-child(4n + 3) {
    background-color: var(--color__opcion3);
}

.redi2 .listaComponentes .componente:nth-child(4n + 4),
.redi2 .contenedorA .componente:nth-child(4n + 4),
.redi2 .contenedorB .componente:nth-child(4n + 4) {
    background-color: var(--color__opcion4);
}

.redi2 .componente img {
    border-radius: 10px 10px 0 0;
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .redi2 .componente img {
        max-height: 90%;
        max-width: 130px;
    }

}

/*=== FIN ORIGEN ===*/

/*=== DESTINO ===*/

.redi2 .componentesDestino__content {
    width: calc(var(--contenedoresDestino__ancho) - var(--espacioEntreContenedores) * 2);
    margin: 10px var(--espacioEntreContenedores);
    background-color: var(--contenedoresDestino__colorFondo);
    text-align: center;
    padding: 15px;
    border-radius: 15px;
}

@media (max-width: 991px) {
    .redi2 .componentesDestino__content {
        max-width: 500px;
        margin: auto;
    }
}

@media (max-width: 767px) {
    .redi2 .componentesDestino__content {
        max-width: 400px;
        margin: 10px auto;
    }
}

.redi2 .contenedorA,
.redi2 .contenedorB,
.redi2 .contenedorC,
.redi2 .contenedorD {
    min-height: 300px;
    vertical-align: top;
    transform: scale(1);
    transition: transform .3s;
    border-radius: 20px;

    position: relative;
    border-radius: 20px;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;

    padding: 0;
    margin: 15px 0;
    position: relative;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.redi2 .contenedorA {
    background-color: var(--color__contenedorA);
    border: 2px dashed #3c6baf;
}

.redi2 .contenedorB {
    background-color: var(--color__contenedorB);
    border: 2px dashed #6c102b;
}

.redi2 .contenedorC {
    background-color: var(--color__contenedorC);
    border: 2px dashed #518fa8;
}

.redi2 .contenedorD {
    background-color: var(--color__contenedorD);
    border: 2px dashed #d58620;
}

.redi2 .componentesDestino__titulo {
    color: #016d38;
    font-size: 25px;
    margin: 0 0 10px;
}

/* Termina GRUPOS DE PROCESOS */

/*-- Maquetación --*/

.redi2.contenido {
    max-width: 1140px;
}

.redi2 .componentesContent,
.redi2 .componentesDestino {
    width: 100%;
    display: flex;
}

.redi2 .componentesDestino {
    flex-wrap: wrap;
    margin-bottom: 15px;
}

/*-- Fin Maquetación --*/

@media (max-width: 991px) {
    .redi2 .listaComponentes .componente {
        min-width: 100px;
        font-size: 16px;
        margin-bottom: 0;
        padding-bottom: 0;
        transform: scale(1.4);
    }

    .redi2 .componentesContent {
        position: sticky;
        top: -15px;
        margin-top: -15px;
        z-index: 2;
        background-color: #efefef;
        padding-top: 10px;
        box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
        border-radius: 0 0 40px 40px;
    }

    .redi2 .componentesDestino__content {
        width: 100%;
    }
}


/*-- Ajuste btn calificar --*/

.redi2 .redi__calificar {
    position: sticky;
    bottom: 10px;
    z-index: 999;
}

.backdrop .contenido.redi2 {
    overflow: initial;
}

.redi2 #edModal__calificar[disabled] {
    background-color: hsla(151, 98%, 22%, 0.3);
    border-color: hsla(151, 98%, 22%, 0.3);
    cursor: not-allowed;
    transform: scale(1);
}

.backdrop .fondo {
    margin-bottom: 15px;
}