/* Modo claro por defecto */ :root { color-scheme: light; } /* Contenedor full-screen */ .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; /* Gradiente azul inspirado en el prototipo */ background: radial-gradient(1800px 1200px at 50% -20%, rgba(255, 255, 255, 0.25), transparent 60%), linear-gradient(180deg, #0b71c3 0%, #0662ba 35%, #0256ae 70%, #004e9f 100%); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; } /* Centro: logo + spinner */ .preloader__center { display: grid; justify-items: center; gap: 18px; } /* Lockup centrado: responsivo */ .preloader__lockup { width: min(68vw, 520px); height: auto; user-select: none; -webkit-user-drag: none; } /* Spinner sutil en blanco */ .preloader__spinner { width: 44px; height: 44px; border-radius: 9999px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: spin 0.9s linear infinite; } /* Marca Autonort al pie (pegada al bottom con margen) */ .preloader__mark { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(42vw, 260px); height: auto; opacity: 0.9; user-select: none; -webkit-user-drag: none; } /* Animación */ @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .preloader__spinner { animation: none; } } /* Fade-out cuando Vue está listo (lo añade main.ts) */ .preloader--hide { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } /* ───────────────────────────────────────────────────────────── OPCIONAL: estilos para modo oscuro cuando actives .app-dark (ej: agregando class="app-dark" en dinámicamente) ───────────────────────────────────────────────────────────── */ .app-dark .preloader { color-scheme: dark; background: radial-gradient(1800px 1200px at 50% -20%, rgba(255, 255, 255, 0.1), transparent 60%), linear-gradient(180deg, #0a3762 0%, #092d56 35%, #08264a 70%, #071f3d 100%); } .app-dark .preloader__spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; }