/* Pantalla de arranque y base de la página. La interfaz la pinta Avalonia (WebAssembly) en #out. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #F2F3F8; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
#out { height: 100%; }

#arranque {
    position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
    background: #F2F3F8; color: #14172B;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transition: opacity 320ms ease, transform 320ms ease;
}
#arranque .centro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; max-width: 360px; }
#arranque .logo { width: 88px; height: 88px; filter: drop-shadow(0 16px 26px rgba(59, 47, 201, 0.32)); }
#arranque h1 { margin: 8px 0 0; font-size: 27px; font-weight: 750; letter-spacing: -0.6px; }
#arranque p { margin: 0; color: #4F5470; font-size: 14px; min-height: 1.4em; }
#arranque .barra { margin-top: 6px; width: 168px; height: 4px; border-radius: 2px; background: #E1E4EE; overflow: hidden; }
#arranque-relleno { width: 4%; height: 100%; border-radius: 2px; background: #4B3FE0; transition: width 260ms ease-out; }
#arranque button {
    margin-top: 4px; font: 600 14px system-ui, sans-serif; color: #4B3FE0; background: transparent;
    border: 1.5px solid #4B3FE0; border-radius: 12px; padding: 10px 20px; cursor: pointer;
}
#arranque-error p { color: #BE3434; max-width: 28em; }
#arranque.listo { opacity: 0; transform: scale(1.015); pointer-events: none; }
#arranque.oculto { display: none; }

@media (prefers-color-scheme: dark) {
    html, body, #arranque { background: #0D0F1C; }
    #arranque { color: #E8EAF6; }
    #arranque p { color: #B0B5D2; }
    #arranque .barra { background: #2A2F52; }
    #arranque-relleno { background: #9A92FF; }
    #arranque button { color: #9A92FF; border-color: #9A92FF; }
    #arranque-error p { color: #F08585; }
}
@media (prefers-reduced-motion: reduce) {
    #arranque, #arranque-relleno { transition: none; }
    #arranque.listo { transform: none; }
}