/*==============================
        ROVI ERP LOADER
==============================*/

:root{
    --azul1:#08131f;
    --azul2:#0d2136;
    --azul3:#0f6db4;
    --celeste:#1ec8ff;
    --blanco:#ffffff;
}

#loader_ia{

    position:fixed;
    inset:0;

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

    background:linear-gradient(-45deg,#05080d,#08131f,#0d2136,#123b63);
    background-size:400% 400%;

    animation:fondo 15s ease infinite;

    z-index:99999999;

    transition:opacity .8s;

}

#loader_ia.oculto{

    opacity:0;

    pointer-events:none;

}

.loaderCard{

    width:520px;
    max-width:92%;

    padding:45px;

    border-radius:22px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 30px 60px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.03);

    text-align:center;

}

.loaderTitulo{

    color:white;

    font-size:46px;

    font-weight:bold;

    letter-spacing:8px;

    font-family:Segoe UI,Arial;

    animation:pulse 2.5s infinite;

}

.loaderSub{

    color:#c9dff3;

    margin-top:8px;

    font-size:18px;

}

.loaderSpinner{

    width:85px;

    height:85px;

    margin:40px auto;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid var(--celeste);

    animation:spin .9s linear infinite;

}

#loaderMensaje{

    color:white;

    font-size:20px;

    margin-bottom:20px;

    min-height:28px;

}

.loaderProgress{

    width:100%;

    height:12px;

    border-radius:30px;

    background:#17324d;

    overflow:hidden;

}

#loaderBarra{

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(90deg,#00d2ff,#2b8cff,#00d2ff);

    background-size:200%;

    animation:shine 2s linear infinite;

    transition:width .25s;

}

#loaderPorcentaje{

    color:white;

    font-size:32px;

    font-weight:bold;

    margin-top:20px;

}

.loaderVersion{

    margin-top:30px;

    color:#7da8c9;

    font-size:13px;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes pulse{

50%{

transform:scale(1.04);

}

}

@keyframes shine{

from{

background-position:0%;

}

to{

background-position:200%;

}

}

@keyframes fondo{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}