/* ==========================================================
   TRAZION CLOUD
   PRELOADER V2
   ========================================================== */

:root {
    --trz-loader-navy: #0B1D3A;
    --trz-loader-slate: #44566F;
    --trz-loader-blue: #2563EB;
    --trz-loader-light: #D6DCE6;
    --trz-loader-bg: #F3F6FA;
}


/* ==========================================================
   PRELOADER POST-LOGIN
   ========================================================== */

#trazion-login-preloader {

    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(37,99,235,.08) 0%,
            rgba(37,99,235,0) 34%
        ),
        #F3F6FA;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .25s ease,
        visibility 0s linear .25s;

}


/*
 * La clase se añade en HEAD antes de pintar la página,
 * evitando que se vea el dashboard antes del loader.
 */
html.trazion-login-preload-pending
#trazion-login-preloader {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* salida durante los últimos 250 ms */
html.trazion-login-preload-pending
#trazion-login-preloader.trazion-preloader-leaving {

    opacity:
        0;

    transition:
        opacity .25s ease;

}


/* ==========================================================
   CONTENIDO
   ========================================================== */

.trazion-preloader-content {

    width:
        min(100%, 340px);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


/* ==========================================================
   MARCA CENTRAL
   ========================================================== */

.trazion-preloader-mark {

    position:
        relative;

    width:
        106px;

    height:
        106px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        24px;

}


/* halo */
.trazion-preloader-mark::before {

    content:
        "";

    position:
        absolute;

    inset:
        -10px;

    border-radius:
        32px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.12),
            rgba(37,99,235,0) 67%
        );

    animation:
        trazionLoaderGlow
        1.6s
        ease-in-out
        infinite;

}


/* tarjeta del icono */
.trazion-preloader-icon {

    position:
        relative;

    z-index:
        3;

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border:
        1px solid
        rgba(214,220,230,.9);

    border-radius:
        24px;

    box-shadow:
        0 16px 38px
        rgba(11,29,58,.11);

}


/* logo */
.trazion-preloader-icon img {

    width:
        54px;

    height:
        54px;

    object-fit:
        contain;

}


/* aro */
.trazion-preloader-ring {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    border:
        2px solid
        rgba(37,99,235,.13);

    border-top-color:
        #2563EB;

    border-right-color:
        rgba(11,29,58,.78);

    border-radius:
        50%;

    animation:
        trazionLoaderSpin
        .90s
        linear
        infinite;

}


/* punto trazador */
.trazion-preloader-ring::after {

    content:
        "";

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    top:
        6px;

    right:
        20px;

    background:
        #2563EB;

    border-radius:
        50%;

    box-shadow:
        0 0 0 5px
        rgba(37,99,235,.10);

}


/* ==========================================================
   TEXTO
   ========================================================== */

.trazion-preloader-brand {

    margin:
        0;

    color:
        #0B1D3A;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        21px;

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -.035em;

}


.trazion-preloader-brand span {

    color:
        #2563EB;

}


.trazion-preloader-copy {

    margin:
        7px
        0
        18px;

    color:
        #64748B;

    font-family:
        Inter,
        sans-serif;

    font-size:
        12.5px;

    font-weight:
        500;

}


/* ==========================================================
   PROGRESO
   ========================================================== */

.trazion-preloader-progress {

    position:
        relative;

    width:
        170px;

    height:
        4px;

    overflow:
        hidden;

    background:
        #E2E8F0;

    border-radius:
        999px;

}


.trazion-preloader-progress span {

    position:
        absolute;

    inset:
        0;

    width:
        0;

    background:
        linear-gradient(
            90deg,
            #0B1D3A 0%,
            #2563EB 100%
        );

    border-radius:
        inherit;

}


html.trazion-login-preload-pending
.trazion-preloader-progress span {

    animation:
        trazionLoginProgress
        1.5s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* punticos tecnológicos */
.trazion-preloader-dots {

    display:
        flex;

    gap:
        5px;

    margin-top:
        15px;

}


.trazion-preloader-dots i {

    width:
        4px;

    height:
        4px;

    display:
        block;

    background:
        #94A3B8;

    border-radius:
        50%;

    opacity:
        .45;

    animation:
        trazionLoaderDot
        1s
        ease-in-out
        infinite;

}


.trazion-preloader-dots i:nth-child(2) {
    animation-delay: .12s;
}

.trazion-preloader-dots i:nth-child(3) {
    animation-delay: .24s;
}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes trazionLoaderSpin {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes trazionLoaderGlow {

    0%,
    100% {
        transform:
            scale(.94);

        opacity:
            .55;
    }

    50% {
        transform:
            scale(1.08);

        opacity:
            1;
    }

}


@keyframes trazionLoginProgress {

    0% {
        width:
            0%;
    }

    35% {
        width:
            42%;
    }

    72% {
        width:
            78%;
    }

    100% {
        width:
            100%;
    }

}


@keyframes trazionLoaderDot {

    0%,
    100% {
        transform:
            translateY(0);

        opacity:
            .35;
    }

    50% {
        transform:
            translateY(-3px);

        opacity:
            1;
    }

}


/* ==========================================================
   PRELOADER LEGACY DE LOS MÓDULOS
   Modernizamos #loader-wrapper existente
   ========================================================== */

#loader-wrapper {

    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        50000 !important;

    width:
        100% !important;

    height:
        100% !important;

    display:
        block !important;

    background:
        radial-gradient(
            circle at center,
            rgba(37,99,235,.07),
            transparent 28%
        ),
        #F3F6FA !important;

}


/* eliminamos las viejas cortinas partidas */
#loader-wrapper
.loader-section {

    display:
        none !important;

}


/*
 * Nuevo loader para páginas internas que todavía utilizan
 * <div id="loader-wrapper"><div id="loader"></div>...
 */
#loader {

    position:
        absolute !important;

    top:
        50% !important;

    left:
        50% !important;

    z-index:
        3 !important;

    width:
        92px !important;

    height:
        92px !important;

    margin:
        -70px
        0
        0
        -46px !important;

    background:
        #FFFFFF
        url('../../img/trazion/trazion_cloud_icon.png')
        center
        center
        /
        50px
        50px
        no-repeat !important;

    border:
        1px solid
        #D6DCE6 !important;

    border-radius:
        24px !important;

    box-shadow:
        0 16px 38px
        rgba(11,29,58,.11) !important;

    animation:
        none !important;

}


/* aro del loader interno */
#loader::before {

    content:
        "" !important;

    position:
        absolute !important;

    inset:
        -11px !important;

    border:
        2px solid
        rgba(37,99,235,.12) !important;

    border-top-color:
        #2563EB !important;

    border-right-color:
        #0B1D3A !important;

    border-radius:
        50% !important;

    animation:
        trazionLoaderSpin
        .9s
        linear
        infinite !important;

}


/* ya no usamos el tercer aro antiguo */
#loader::after {

    display:
        none !important;

}


/* nombre bajo loader interno */
#loader-wrapper::before {

    content:
        "Trazion Assets";

    position:
        absolute;

    top:
        calc(50% + 45px);

    left:
        0;

    right:
        0;

    color:
        #0B1D3A;

    font-family:
        Inter,
        sans-serif;

    font-size:
        15px;

    font-weight:
        750;

    text-align:
        center;

}


/* texto auxiliar */
#loader-wrapper::after {

    content:
        "Cargando información...";

    position:
        absolute;

    top:
        calc(50% + 70px);

    left:
        0;

    right:
        0;

    color:
        #64748B;

    font-family:
        Inter,
        sans-serif;

    font-size:
        11px;

    text-align:
        center;

}


/* salida moderna */
.loaded
#loader-wrapper {

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transform:
        none !important;

    transition:
        opacity .25s ease,
        visibility 0s linear .25s !important;

}


.loaded
#loader-wrapper
#loader {

    opacity:
        0 !important;

    transform:
        scale(.94) !important;

    transition:
        opacity .20s ease,
        transform .20s ease !important;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .trazion-preloader-mark {

        width:
            94px;

        height:
            94px;

    }


    .trazion-preloader-icon {

        width:
            72px;

        height:
            72px;

        border-radius:
            21px;

    }


    .trazion-preloader-icon img {

        width:
            47px;

        height:
            47px;

    }


    .trazion-preloader-brand {

        font-size:
            19px;

    }


    .trazion-preloader-copy {

        font-size:
            11.5px;

    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .trazion-preloader-ring,

    .trazion-preloader-mark::before,

    .trazion-preloader-dots i,

    .trazion-preloader-progress span,

    #loader::before {

        animation:
            none !important;

    }

}



/* ==========================================================
   TRAZION PRELOADER V2.1
   Control global + DataTables
   ========================================================== */


/*
 * Por defecto el preloader global está oculto.
 */
#trazion-login-preloader {

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transition:
        opacity .24s ease,
        visibility 0s linear .24s !important;

}


/*
 * Estado visible controlado exclusivamente por JS.
 */
#trazion-login-preloader.trazion-preloader-visible {

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

    transition:
        opacity .20s ease,
        visibility 0s linear 0s !important;

}


/*
 * Fade de salida.
 */
#trazion-login-preloader.trazion-preloader-leaving {

    opacity:
        0 !important;

    pointer-events:
        none !important;

}


/* ==========================================================
   BARRA DE PROGRESO
   ========================================================== */

#trazion-login-preloader
.trazion-preloader-progress span {

    width:
        0;

    animation:
        none !important;

}


#trazion-login-preloader.trazion-preloader-visible
.trazion-preloader-progress span {

    animation:
        trazionGlobalLoaderProgress
        1.5s
        cubic-bezier(.22,.61,.36,1)
        forwards !important;

}


@keyframes trazionGlobalLoaderProgress {

    0% {

        width:
            4%;

    }

    35% {

        width:
            44%;

    }

    72% {

        width:
            78%;

    }

    100% {

        width:
            100%;

    }

}


/* ==========================================================
   DESACTIVAR PRELOADERS LEGACY
   ========================================================== */

/*
 * Ya no dependemos de tener:
 *
 * <div id="loader-wrapper">
 *
 * dentro de cada acciones/lista.php.
 *
 * Dejamos temporalmente el HTML existente para no tocar
 * decenas de vistas, pero visualmente queda neutralizado.
 */
body #loader-wrapper {

    display:
        none !important;

}


/*
 * La clase antigua tampoco debe controlar el nuevo loader.
 */
html.trazion-login-preload-pending
#trazion-login-preloader:not(.trazion-preloader-visible) {

    opacity:
        0 !important;

    visibility:
        hidden !important;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    #trazion-login-preloader
    .trazion-preloader-content {

        width:
            min(100%, 290px);

    }

}



/* ==========================================================
   TRAZION PRELOADER V2.2
   Logo transparente + arranque post-login inmediato
   ========================================================== */


/* ==========================================================
   MARCA
   ========================================================== */

.trazion-preloader-mark {

    width:
        112px !important;

    height:
        112px !important;

    margin-bottom:
        21px !important;

}


/*
 * Quitamos completamente la tarjeta blanca.
 */
.trazion-preloader-icon {

    position:
        relative !important;

    z-index:
        3 !important;

    width:
        78px !important;

    height:
        78px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

}


/* Logo un poco más protagonista */
.trazion-preloader-icon img {

    width:
        64px !important;

    height:
        64px !important;

    object-fit:
        contain !important;

    filter:
        drop-shadow(
            0 7px 12px
            rgba(11,29,58,.10)
        );

}


/*
 * Aro algo más fino y elegante.
 */
.trazion-preloader-ring {

    inset:
        2px !important;

    border-width:
        2px !important;

    border-color:
        rgba(37,99,235,.11) !important;

    border-top-color:
        #2563EB !important;

    border-right-color:
        #0B1D3A !important;

}


/* Halo sin tarjeta */
.trazion-preloader-mark::before {

    inset:
        -7px !important;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.11) 0%,
            rgba(37,99,235,.045) 38%,
            rgba(37,99,235,0) 70%
        ) !important;

}


/* ==========================================================
   POST LOGIN - VISIBILIDAD TEMPRANA
   ========================================================== */

/*
 * PHP coloca esta clase en HEAD antes de renderizar BODY.
 * Por eso el loader aparece inmediatamente al entrar.
 */
html.trazion-login-preload-pending
#trazion-login-preloader {

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

}


/*
 * Cuando JS toma control, sigue visible sin parpadeo.
 */
html.trazion-login-preload-pending
#trazion-login-preloader.trazion-preloader-visible {

    opacity:
        1 !important;

    visibility:
        visible !important;

}


/*
 * El fade tiene prioridad incluso si todavía queda
 * temporalmente la clase del HTML.
 */
html.trazion-login-preload-pending
#trazion-login-preloader.trazion-preloader-leaving,

#trazion-login-preloader.trazion-preloader-leaving {

    opacity:
        0 !important;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .trazion-preloader-mark {

        width:
            100px !important;

        height:
            100px !important;

    }


    .trazion-preloader-icon {

        width:
            70px !important;

        height:
            70px !important;

    }


    .trazion-preloader-icon img {

        width:
            57px !important;

        height:
            57px !important;

    }

}



/* ==========================================================
   TRAZION PRELOADER V2.3
   SOLO POST-LOGIN
   Duración: 2 segundos
   ========================================================== */


/*
 * Los preloaders antiguos de vistas quedan deshabilitados.
 * Ya no aparecerá loader por DataTables ni por lista.php.
 */
body #loader-wrapper {

    display:
        none !important;

}


/*
 * Estado base.
 */
#trazion-login-preloader {

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

}


/*
 * PHP/JS temprano lo hace visible ANTES de pintar
 * Inicio o Panel SaaS.
 */
html.trazion-login-preload-pending
#trazion-login-preloader,

#trazion-login-preloader.trazion-preloader-visible {

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

}


/*
 * Salida.
 */
html.trazion-login-preload-pending
#trazion-login-preloader.trazion-preloader-leaving,

#trazion-login-preloader.trazion-preloader-visible.trazion-preloader-leaving {

    opacity:
        0 !important;

    transition:
        opacity .25s ease !important;

}


/* ==========================================================
   LOGO COMPLETAMENTE TRANSPARENTE
   ========================================================== */

#trazion-login-preloader
.trazion-preloader-icon {

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

}


#trazion-login-preloader
.trazion-preloader-icon img {

    filter:
        drop-shadow(
            0 8px 13px
            rgba(11,29,58,.11)
        ) !important;

}


/* ==========================================================
   BARRA DE 2 SEGUNDOS
   ========================================================== */

#trazion-login-preloader
.trazion-preloader-progress span {

    width:
        0 !important;

    animation:
        none !important;

}


#trazion-login-preloader.trazion-preloader-visible
.trazion-preloader-progress span,

html.trazion-login-preload-pending
#trazion-login-preloader
.trazion-preloader-progress span {

    animation:
        trazionLoginProgressTwoSeconds
        2s
        cubic-bezier(.22,.61,.36,1)
        forwards !important;

}


@keyframes trazionLoginProgressTwoSeconds {

    0% {
        width: 3%;
    }

    25% {
        width: 30%;
    }

    55% {
        width: 61%;
    }

    80% {
        width: 84%;
    }

    100% {
        width: 100%;
    }

}