.overlay-rotacion {

    display: none;

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: #3a0a7f;
    color: #ffffff;

    z-index: 999999;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 24px;

    box-sizing: border-box;
}


.overlay-rotacion .icono-rotar {

    font-size: 64px;

    margin-bottom: 20px;

    animation: girar-icono 1.6s ease-in-out infinite;
}


.overlay-rotacion h2 {

    font-family: "Agrandir", sans-serif;

    font-size: 24px;

    margin: 0 0 12px;
}


.overlay-rotacion p {

    font-family: "Agrandir", sans-serif;

    font-size: 16px;

    line-height: 1.4;

    opacity: 0.9;

    margin: 0;

    max-width: 320px;
}


@keyframes girar-icono {

    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(0deg);
    }

}


body.bloqueo-rotacion {

    overflow: hidden !important;
}


body.bloqueo-rotacion > *:not(.overlay-rotacion) {

    display: none !important;
}


body.bloqueo-rotacion .overlay-rotacion {

    display: flex !important;
}