:root {
    --opacity-img: 0;
    --transition-img: 0.5s ease-in-out;
    --opacity-img-delay: 0;
}

:is(#escenario_clinico_1,#escenario_clinico_2,#escenario_clinico_3) .font30px {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
}

@layer imagenes {

    /* Posiciones individuales */
    .tarjeta {
        left: 73px;
        top: 0px;

        --opacity-img: 1;
    }

    .flecha-azul {
        left: 455px;
        top: 35px;
        --opacity-img: 1;
    }

    .flecha-roja-1 {
        left: 455px;
        top: 35px;
    }

    .flecha-roja-2 {
        left: 454px;
        top: 121px;
    }

    .sel-pauta-none {
        left: 541px;
        top: -1px;
        --opacity-img: 1;
    }

    .sel-pauta-sel {
        left: 541px;
        top: -1px;
    }

    .sel-correccion-none {
        left: 541px;
        top: 119px;
        --opacity-img: 1;
    }

    .sel-correccion-sel {
        left: 541px;
        top: 119px;
    }

    .circulo-1 {
        left: 46px;
        top: 7px;
    }

    .circulo-2 {
        left: 59px;
        top: 66px;
    }

    .llave-card {
        left: 51px;
        top: 180px;
    }

    .corr-list-pauta {
        left: 67px;
        top: 208px;
    }

    .circulo-3 {
        left: 123px;
        top: 35px;
    }

    .llave-vert {
        left: 517px;
        top: 208px;
    }

    .result {
        left: 541px;
        top: 250px;
    }

    .corr-result {
        left: 72px;
        top: 233px;
    }

    .llave-vert-2 {
        left: 428px;
        top: 238px;
    }

    .grafico-result {
        left: 443px;
        top: 238px;
    }

    .datos-final {
        left: 440px;
        top: 170px;
    }
}

[data-step="1"] .circulo-1 {
    --opacity-img: 0;
}

[data-step="1"] .circulo-2 {
    --opacity-img: 0;
}

[data-step="1"] .sel-pauta-none {
    --opacity-img: 1;
}

[data-step="2"] .flecha-azul {
    --opacity-img: 0;
}

[data-step="2"] .flecha-roja-1 {
    --opacity-img: 1;
}

[data-step="2"] .sel-pauta-none {
    --opacity-img: 0;

    transition-delay: 1s;
}

[data-step="2"] .sel-pauta-sel {
    --opacity-img: 1;
}

[data-step="2"] .circulo-1 {
    --opacity-img: 1;
}

[data-step="2"] .circulo-2 {
    --opacity-img: 1;
}

[data-step="2"] .llave-card {
    --opacity-img: 1;
}

[data-step="2"] .llave-vert {
    --opacity-img: 1;
}

[data-step="2"] .corr-list-pauta {
    --opacity-img: 1;
}

[data-step="2"] .llave-vert {
    --opacity-img: 1;
}

[data-step="2"] .result {
    --opacity-img: 1;
}

[data-step="2"] .corr-result {
    --opacity-img: 0;
}

[data-step="3"] .corr-list-pauta {
    --opacity-img: 0;
}

[data-step="3"] .flecha-azul {
    --opacity-img: 0;
}

[data-step="3"] .flecha-roja-1 {
    --opacity-img: 0;
}

[data-step="3"] .flecha-roja-2 {
    --opacity-img: 1;
}

[data-step="3"] .llave-vert {
    --opacity-img: 0;
}

[data-step="3"] .circulo-1 {
    --opacity-img: 0;
}

[data-step="3"] .circulo-2 {
    --opacity-img: 0;
}

[data-step="3"] .circulo-3 {
    --opacity-img: 1;
}

[data-step="3"] .llave-card {
    --opacity-img: 1;
}

[data-step="3"] .llave-vert-2 {
    --opacity-img: 1;
}

[data-step="3"] .sel-pauta-sel {
    --opacity-img: 0;
}

[data-step="3"] .sel-correccion-sel {
    --opacity-img: 1;
}

[data-step="3"] .corr-result {
    --opacity-img: 1;
}

[data-step="3"] .grafico-result {
    --opacity-img: 1;
}

[data-step="3"] .datos-final {
    --opacity-img: 1;
}

html, body {
    overflow-y: auto !important;
}