/* =====================================================================
   WASM Loader — brand-agnostic breathing constellation
   Used by:
     - wwwroot/index*.html (pre-WASM boot loader)
     - Client/Shared/Loader*.razor (in-app loaders)

   Tenants can override --brand-primary / --brand-secondary / --brand-accent
   in an inline <style> block in their index_<TENANT>.html.
   Defaults are Full of Dreams blues.
   ===================================================================== */

:root {
    --brand-primary: #12406E;
    --brand-secondary: #4E77A0;
    --brand-accent: #A9BFD5;
    --loader-bg: #ffffff;
    --loader-logo-max-width: 250px;
}

.wasm-loader {
    --loader-c-1: var(--brand-primary, #12406E);
    --loader-c-2: var(--brand-secondary, #4E77A0);
    --loader-c-3: var(--brand-accent, #A9BFD5);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: var(--loader-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

/* Inline variant: fills a parent container instead of the whole viewport.
       Used by Razor loaders embedded inside pages (Loader_Partial, LoaderHotels, etc.). */
.wasm-loader.wasm-loader--inline {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    min-height: 100%;
}

.wasm-loader__logo {
    max-width: var(--loader-logo-max-width);
    width: auto;
    height: auto;
    display: block;
}

.wasm-loader__stars {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 32px;
}

    .wasm-loader__stars svg {
        display: block;
        animation: wasm-loader-twinkle 1.8s ease-in-out infinite;
        transform-origin: center;
        will-change: transform, opacity;
        backface-visibility: hidden;
    }

        .wasm-loader__stars svg:nth-child(1),
        .wasm-loader__stars svg:nth-child(5) {
            width: 16px;
            height: 16px;
        }

        .wasm-loader__stars svg:nth-child(2),
        .wasm-loader__stars svg:nth-child(4) {
            width: 22px;
            height: 22px;
        }

        .wasm-loader__stars svg:nth-child(3) {
            width: 28px;
            height: 28px;
        }

        .wasm-loader__stars svg:nth-child(1) {
            animation-delay: 0s
        }

        .wasm-loader__stars svg:nth-child(2) {
            animation-delay: .3s
        }

        .wasm-loader__stars svg:nth-child(3) {
            animation-delay: .6s
        }

        .wasm-loader__stars svg:nth-child(4) {
            animation-delay: .9s
        }

        .wasm-loader__stars svg:nth-child(5) {
            animation-delay: 1.2s
        }

@keyframes wasm-loader-twinkle {
    0%, 100% {
        opacity: .2;
        transform: translateZ(0) scale(.55)
    }

    50% {
        opacity: 1;
        transform: translateZ(0) scale(1)
    }
}

@media (prefers-reduced-motion: reduce) {
    .wasm-loader__stars svg {
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
    }

    @keyframes wasm-loader-twinkle {
        0%, 100% {
            opacity: .5;
            transform: none
        }

        50% {
            opacity: 1;
            transform: none
        }
    }
}

/* ── Chip del logo de la agencia (instancias multi-marca: SPECTRO / STAGEPASS) ──────
   Varias agencias tienen el logo en arte BLANCO sobre PNG transparente (3432, 3434,
   3435, 3443) y en la app TODO el fondo donde va el logo es blanco: --loader-bg,
   --nav-navbar-bg y el header del login. Sin fondo esos logos desaparecían.

   Se aplica SOLO a los logos claros, no a todos: un navy fijo rompe los logos oscuros
   (comprobado con 3441.png, donde el texto "Diego" es navy y desaparecía). Quién es
   "claro" lo decide window.enixLogoIsLight (enix-quote-export.js), el mismo medidor que
   ya usa el link público de presupuestos. Los logos oscuros y los JPG que traen su propio
   fondo blanco se siguen viendo tal cual, sin chip.

   Navy literal y no var(--navy) a propósito: esto también lo usa el splash de arranque,
   que se pinta antes de que Blazor exista y no depende de los tokens. */
.enix-agency-logo-chip {
    background: #0d2240;
    border-radius: 9px;
    padding: 8px 12px;
    box-sizing: border-box;
}