/* boot.css — loader de ARRANQUE (pre-React). Se carga sin depender del JS, así durante la transición entre
   páginas se ve la marca animada en vez de un blanco. React reemplaza el contenido del #root al montar y el
   loader desaparece solo. Colores literales (los tokens viven en styles.css, que llega con el JS). */
.boot-loader { position: fixed; inset: 0; display: grid; place-items: center; background: #f3f4f6; z-index: 9999; }
@media (prefers-color-scheme: dark) { .boot-loader { background: #0f1117; } }
.boot-mark { display: grid; grid-template-columns: repeat(2, 20px); grid-auto-rows: 20px; gap: 6px; }
.boot-mark span { border-radius: 6px; animation: boot-pulse 1.1s ease-in-out infinite; }
.boot-mark span:nth-child(1) { background: #2563eb; animation-delay: 0s; }
.boot-mark span:nth-child(2) { background: #7c3aed; animation-delay: .14s; }
.boot-mark span:nth-child(3) { background: #d97706; animation-delay: .28s; }
.boot-mark span:nth-child(4) { background: #5b53e0; animation-delay: .42s; }
@keyframes boot-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }