/* ============================================================
   Splash / main loader — "Mi Factura Digital" (Claude-Design Loader.html)
   Loads on first paint (before the Angular styles bundle), so the teal/slate
   palette is hardcoded here rather than via the app's CSS variables.
   ============================================================ */
body fuse-splash-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    /* light & airy canvas with a soft radial highlight */
    background: radial-gradient(90% 70% at 50% 38%, #ffffff 0%, #f4f7fb 70%);
    font-family: "Public Sans", system-ui, -apple-system, sans-serif;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* honeycomb hex cluster */
body fuse-splash-screen .hexmark { position: relative; width: 132px; height: 132px; }
body fuse-splash-screen .hexmark svg { width: 100%; height: 100%; overflow: visible; }
body fuse-splash-screen .hx {
    transform-box: fill-box; transform-origin: center;
    animation: mfd-hexPulse 1.6s ease-in-out infinite;
}
body fuse-splash-screen .hx.h1 { animation-delay: 0s; }
body fuse-splash-screen .hx.h2 { animation-delay: .2s; }
body fuse-splash-screen .hx.h3 { animation-delay: .4s; }
@keyframes mfd-hexPulse {
    0%, 70%, 100% { opacity: .28; transform: scale(.9); }
    35% { opacity: 1; transform: scale(1); }
}

/* soft rotating ring behind the mark */
body fuse-splash-screen .hexring {
    position: absolute; inset: -22px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, #e7f3f6 90deg, #1593b0 200deg, transparent 320deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: mfd-spin 2.4s linear infinite; opacity: .9;
}

/* wordmark */
body fuse-splash-screen .loader-wordmark { text-align: center; }
body fuse-splash-screen .lw-name { font-family: "Plus Jakarta Sans", "Public Sans", sans-serif; font-size: 22px; font-weight: 800; color: #0d1726; letter-spacing: -0.02em; }
body fuse-splash-screen .lw-name .accent { color: #0e7490; }
body fuse-splash-screen .lw-sub { font-size: 12px; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; color: #93a1b3; margin-top: 6px; }

/* shimmer progress bar */
body fuse-splash-screen .loader-bar { width: 220px; height: 5px; border-radius: 5px; background: #e6ebf1; overflow: hidden; position: relative; }
body fuse-splash-screen .loader-bar span {
    position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 5px;
    background: linear-gradient(90deg, #1593b0, #0c5e75);
    animation: mfd-slide 1.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes mfd-slide {
    0% { left: -42%; width: 42%; }
    50% { width: 58%; }
    100% { left: 100%; width: 42%; }
}

body fuse-splash-screen .loader-foot { position: fixed; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: #93a1b3; }
body fuse-splash-screen .loader-foot b { color: #4a5a70; font-weight: 700; }

@keyframes mfd-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    body fuse-splash-screen .hx,
    body fuse-splash-screen .hexring,
    body fuse-splash-screen .loader-bar span { animation-duration: 0s; }
    body fuse-splash-screen .hx { opacity: 1; }
}

/* Modo oscuro — el script inline de index.html aplica body.dark antes del
   primer paint, así que el splash tampoco destella en claro. */
body.dark fuse-splash-screen {
    background: radial-gradient(90% 70% at 50% 38%, #1e293b 0%, #0f172a 70%);
}
body.dark fuse-splash-screen .lw-name { color: #f1f5f9; }
body.dark fuse-splash-screen .lw-name .accent { color: #2fb3d0; }
body.dark fuse-splash-screen .lw-sub { color: #64748b; }
body.dark fuse-splash-screen .hexring {
    background: conic-gradient(from 0deg, transparent 0deg, rgba(21, 147, 176, .25) 90deg, #1593b0 200deg, transparent 320deg);
}
body.dark fuse-splash-screen .loader-bar { background: #334155; }
body.dark fuse-splash-screen .loader-foot { color: #64748b; }
body.dark fuse-splash-screen .loader-foot b { color: #cbd5e1; }

body:not(.fuse-splash-screen-hidden) {
    overflow: hidden;
}

body.fuse-splash-screen-hidden fuse-splash-screen {
    visibility: hidden;
    opacity: 0;
}