/* Pantalla de arranque mientras se descarga WebAssembly (antes de que Avalonia pinte), con la identidad de Mi Garaje. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #EFECE6; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
#out { height: 100%; }
.splash {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
    align-items: center; justify-content: center; pointer-events: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #EFECE6; color: #1A2326;
}
.splash .logo { width: 84px; height: 84px; filter: drop-shadow(0 14px 24px rgba(10, 61, 72, 0.28)); }
.splash h1 { margin: 6px 0 0; font-size: 26px; font-weight: 750; letter-spacing: -0.6px; }
.splash p { margin: 0; color: #545D5A; font-size: 14px; }
.splash .bar { margin-top: 6px; width: 148px; height: 4px; border-radius: 2px; background: #E1DCD3; overflow: hidden; }
.splash .bar::after {
    content: ""; display: block; width: 40%; height: 100%; background: #0B5C6B; border-radius: 2px;
    animation: carga 1.1s ease-in-out infinite;
}
@keyframes carga { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-color-scheme: dark) {
    html, body { background: #111416; }
    .splash { background: #111416; color: #ECEEEC; }
    .splash p { color: #B0B7B4; }
    .splash .bar { background: #2A3034; }
    .splash .bar::after { background: #4DB6C2; }
}
@media (prefers-reduced-motion: reduce) { .splash .bar::after { animation: none; width: 100%; } }
.splash.splash-close { transition: opacity 200ms; opacity: 0; display: none; }