/* ==========================================================================
MOD-273 · LOGIN Y ARRANQUE
--------------------------------------------------------------------------
Pantalla de acceso y cargador. Zen: mucho blanco, poco elemento, nada que
parpadee sin motivo. Deliberadamente FUERA del sistema de temas — el login
es siempre claro, pase lo que pase con `data-mode`, porque es lo primero que
se ve y no debe depender de nada que aún no ha cargado.
========================================================================== */
:root {
--zen-tinta: #171a22; /* el negro del wordmark */
--zen-papel: #ffffff;
--zen-humo: #f7f7f5; /* el fondo del icono original */
--zen-linea: #e6e6e2;
--zen-tenue: #8b8b86;
--zen-cereza: #c83f55; /* la O de la marca */
}
/* ── LOGIN ─────────────────────────────────────────────────────────────── */
#login-screen {
/* 200000. El login viejo estaba en 99999 y al reescribirlo le puse 100: por
debajo quedaron los botones flotantes (riel, calculadora, bugs, el de
actualizar), que se cuelgan de y NO de #app — por eso el
`#app{display:none}` no los tapa y asomaban sobre el login.
200000 los deja a todos debajo (el más alto de la app es 100500) sin
estorbar al arranque (999999) ni al aviso de recarga (1000000). */
position: fixed; inset: 0; z-index: 200000;
display: flex; align-items: center; justify-content: center;
padding: 32px;
background: var(--zen-papel) !important;
color: var(--zen-tinta) !important;
font-family: Inter, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
text-transform: none !important;
letter-spacing: 0 !important;
box-sizing: border-box;
}
#login-screen *, #login-screen *::before, #login-screen *::after { box-sizing: border-box; }
.zen-wrap {
width: 100%;
max-width: 340px;
display: flex;
flex-direction: column;
align-items: center;
/* Ligeramente por encima del centro óptico: centrado exacto se ve caído. */
margin-bottom: 6vh;
}
/* Fondo en vez de ![]()
: así el navegador descarga SÓLO el archivo del modo
vigente. Con dos ![]()
y uno oculto se bajaban los dos. */
.zen-marca {
width: 268px; margin-bottom: 4px;
aspect-ratio: 1286 / 1100;
background: center / contain no-repeat url(../assets/brand/omnia-logo.svg);
}
html[data-arranque="noche"] .zen-marca { background-image: url(../assets/brand/omnia-logo-noche.svg); }
.zen-lema {
margin: 0 0 40px;
font-size: 11px;
font-weight: 500;
letter-spacing: .34em;
text-indent: .17em; /* MEDIO espacio: compensa el hueco que deja el último carácter */
color: var(--zen-tenue);
text-transform: uppercase;
}
/* Un solo botón. Nada más que decidir. */
.zen-btn {
width: 100%;
min-height: 46px;
padding: 0 20px;
display: inline-flex; align-items: center; justify-content: center; gap: 11px;
border: 1px solid var(--zen-linea);
border-radius: 10px;
background: var(--zen-papel);
color: var(--zen-tinta);
font: inherit;
font-size: 13.5px;
font-weight: 550;
cursor: pointer;
transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.zen-btn:hover { border-color: #c9c9c4; background: var(--zen-humo); }
.zen-btn:active { transform: scale(.985); }
.zen-btn:focus-visible { outline: 2px solid var(--zen-tinta); outline-offset: 3px; }
.zen-btn i { font-size: 15px; }
.zen-pie {
margin-top: 40px;
display: flex; align-items: center; gap: 9px;
font-size: 10.5px;
letter-spacing: .07em;
color: var(--zen-tenue);
}
.zen-pie img { width: 17px; height: 17px; object-fit: contain; opacity: .82; }
.zen-pie .sep { width: 1px; height: 11px; background: var(--zen-linea); }
/* Acceso local (emulador). Discreto y plegado hasta que hace falta. */
#login-emu-box { width: 100%; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--zen-linea); }
#login-emu-box .zen-emu-lbl { margin-bottom: 11px; font-size: 9.5px; letter-spacing: .2em; color: var(--zen-tenue); text-transform: uppercase; text-align: center; }
#login-emu-box input {
width: 100%; margin-bottom: 8px; padding: 10px 12px;
border: 1px solid var(--zen-linea); border-radius: 8px;
background: var(--zen-papel); color: var(--zen-tinta);
font: inherit; font-size: 12.5px; outline: none;
}
#login-emu-box input:focus { border-color: #b9b9b3; }
#login-emu-box .zen-nota { margin-top: 9px; font-size: 9.5px; line-height: 1.5; color: var(--zen-tenue); text-align: center; }
@media (max-width: 480px) {
.zen-wrap { max-width: 300px; margin-bottom: 0; }
.zen-marca { width: 232px; }
}
/* ── ARRANQUE ──────────────────────────────────────────────────────────── */
/* Dos actos: primero el estudio (Blondheera), después el producto (OMNIA). */
#opsys-boot-overlay {
position: fixed; inset: 0; z-index: 999999;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 32px;
background: var(--zen-papel);
color: var(--zen-tinta);
font-family: Inter, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
text-transform: none;
letter-spacing: 0;
box-sizing: border-box;
}
#opsys-boot-overlay * { box-sizing: border-box; }
.boot-acto { display: flex; flex-direction: column; align-items: center; }
.boot-acto[hidden] { display: none; }
/* Acto 1 · el estudio */
#boot-acto-studio { animation: boot-entra .55s ease-out both; }
#boot-acto-studio .perro { width: 88px; height: 88px; object-fit: contain; }
#boot-acto-studio .nombre {
margin-top: 18px;
font-size: 11px; font-weight: 500;
letter-spacing: .42em; text-indent: .21em; /* medio espacio, ver .zen-lema */
color: var(--zen-tenue); text-transform: uppercase;
}
.boot-saliendo { animation: boot-sale .4s ease-in both; }
/* Acto 2 · el producto */
#boot-acto-omnia { animation: boot-entra .5s ease-out both; }
.boot-marca { width: 320px; max-width: 74vw; }
.boot-marca img { width: 100%; height: auto; display: block; }
/* Un paso a la vez, no la lista entera: ocupa poco y se lee de un vistazo.
Lo que NO cargó se queda escrito debajo de forma permanente — es la única
información que sirve después, para decidir si vale la pena recargar. */
.boot-estado {
margin-top: 26px;
min-height: 18px;
display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.boot-actual {
position: relative;
padding: 0 21px; /* simétrico: el icono vive en el margen */
font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
text-indent: .065em; /* medio espacio, ver .zen-lema */
color: var(--zen-tenue);
transition: opacity .25s ease;
}
.boot-actual.cambiando { opacity: 0; }
.boot-actual .marca {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 11px; display: inline-flex; justify-content: center;
font-size: 9px; text-indent: 0; color: var(--zen-cereza);
}
.boot-fallos { display: grid; gap: 3px; justify-items: center; }
.boot-fallo {
position: relative;
padding: 0 18px;
font-size: 10.5px; letter-spacing: .05em;
text-indent: .025em;
color: #a06a12;
animation: boot-entra .3s ease-out both;
}
.boot-fallo i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 9px; text-indent: 0; color: #c98a1c; }
.boot-progreso { width: 168px; height: 2px; margin-top: 20px; border-radius: 2px; background: var(--zen-linea); overflow: hidden; }
.boot-progreso i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--zen-cereza); transition: width .5s cubic-bezier(.4,0,.2,1); }
.boot-version { margin-top: 26px; font-size: 9.5px; letter-spacing: .16em; color: #b8b8b2; }
@keyframes boot-entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes boot-sale { to { opacity: 0; transform: translateY(-7px); } }
/* Respeta a quien pidió no ver animaciones: el arranque se queda quieto. */
@media (prefers-reduced-motion: reduce) {
#boot-acto-studio, #boot-acto-omnia, .boot-saliendo { animation: none; }
/* El logotipo animado se cambia por el quieto desde el JS. */
}
/* ── NOCHE ─────────────────────────────────────────────────────────────────
El reloj del dispositivo decide (ver el script de en index.html). La
franja es la misma que usa `_relojFranja()` en 01-core: noche de 19 a 7.
------------------------------------------------------------------------- */
html[data-arranque="noche"] {
--zen-tinta: #e9eff7;
--zen-papel: #05070f; /* negro con una pizca de azul: el negro puro apaga el color */
--zen-humo: #0c1120;
--zen-linea: #1e2637;
--zen-tenue: #7c8aa5;
--zen-cereza: #4ea8ff; /* la O deja el cereza y se vuelve azul aurora */
}
html[data-arranque="noche"] .zen-btn:hover { border-color: #33405a; }
html[data-arranque="noche"] #login-emu-box input:focus { border-color: #33405a; }
html[data-arranque="noche"] .boot-version { color: #46536e; }
html[data-arranque="noche"] .boot-fallo { color: #e0a93c; }
html[data-arranque="noche"] .boot-fallo i { color: #f0bd57; }
/* El icono del estudio en negativo pesa demasiado sobre el negro. */
html[data-arranque="noche"] .zen-pie img { opacity: .68; }
/* ── EL CIELO ──────────────────────────────────────────────────────────────
Sólo de noche. Va detrás de todo y no recibe clics. Las estrellas son
degradados radiales sobre un mosaico que se repite: cubre cualquier pantalla
sin JavaScript y sin dejar zonas vacías. Tres capas con mosaicos de distinto
tamaño para que la repetición no se note. */
.cielo { display: none; }
html[data-arranque="noche"] .cielo {
display: block;
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
html[data-arranque="noche"] .cielo::before,
html[data-arranque="noche"] .cielo::after,
html[data-arranque="noche"] .cielo > .polvo {
content: ""; position: absolute; inset: -20%;
}
/* Capa 1 · las más pequeñas y numerosas */
html[data-arranque="noche"] .cielo::before {
background-image:
radial-gradient(1px 1px at 167px 79px, rgba(190,214,255,0.81), transparent),
radial-gradient(1px 1px at 39px 276px, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 31px 261px, rgba(255,255,255,0.56), transparent),
radial-gradient(1px 1px at 224px 216px, rgba(255,255,255,0.65), transparent),
radial-gradient(1px 1px at 284px 219px, rgba(255,255,255,0.88), transparent),
radial-gradient(1px 1px at 65px 116px, rgba(255,255,255,0.78), transparent),
radial-gradient(1px 1px at 205px 27px, rgba(255,255,255,0.57), transparent),
radial-gradient(1px 1px at 70px 150px, rgba(190,214,255,0.61), transparent),
radial-gradient(1px 1px at 62px 294px, rgba(190,214,255,0.77), transparent),
radial-gradient(1px 1px at 94px 54px, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 282px 34px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 256px 274px, rgba(190,214,255,0.86), transparent),
radial-gradient(1px 1px at 240px 234px, rgba(190,214,255,0.67), transparent),
radial-gradient(1px 1px at 94px 126px, rgba(255,255,255,0.78), transparent),
radial-gradient(1px 1px at 270px 255px, rgba(190,214,255,0.84), transparent),
radial-gradient(1px 1px at 149px 39px, rgba(255,255,255,0.75), transparent),
radial-gradient(1px 1px at 86px 177px, rgba(255,255,255,0.92), transparent),
radial-gradient(1px 1px at 217px 22px, rgba(255,255,255,0.86), transparent),
radial-gradient(1px 1px at 295px 162px, rgba(190,214,255,0.83), transparent),
radial-gradient(1px 1px at 256px 298px, rgba(190,214,255,0.58), transparent),
radial-gradient(1px 1px at 49px 140px, rgba(190,214,255,0.83), transparent),
radial-gradient(1px 1px at 35px 33px, rgba(190,214,255,0.81), transparent),
radial-gradient(1px 1px at 230px 147px, rgba(190,214,255,0.9), transparent),
radial-gradient(1px 1px at 179px 13px, rgba(190,214,255,0.69), transparent),
radial-gradient(1px 1px at 61px 254px, rgba(255,255,255,0.64), transparent),
radial-gradient(1px 1px at 149px 68px, rgba(255,255,255,0.71), transparent);
background-size: 300px 300px;
animation: cielo-titila 5.5s ease-in-out infinite, cielo-deriva 240s linear infinite;
}
/* Capa 2 · medianas, algunas cálidas */
html[data-arranque="noche"] .cielo > .polvo {
background-image:
radial-gradient(2px 2px at 448px 256px, rgba(255,255,255,0.41), transparent),
radial-gradient(2px 2px at 207px 283px, rgba(190,214,255,0.66), transparent),
radial-gradient(2px 2px at 421px 222px, rgba(255,236,206,0.45), transparent),
radial-gradient(2px 2px at 214px 185px, rgba(255,236,206,0.66), transparent),
radial-gradient(2px 2px at 120px 79px, rgba(255,255,255,0.41), transparent),
radial-gradient(2px 2px at 120px 339px, rgba(255,255,255,0.35), transparent),
radial-gradient(2px 2px at 427px 303px, rgba(255,255,255,0.44), transparent),
radial-gradient(2px 2px at 4px 76px, rgba(190,214,255,0.54), transparent),
radial-gradient(2px 2px at 314px 291px, rgba(190,214,255,0.68), transparent),
radial-gradient(2px 2px at 355px 441px, rgba(255,236,206,0.68), transparent),
radial-gradient(2px 2px at 337px 348px, rgba(255,236,206,0.37), transparent),
radial-gradient(2px 2px at 447px 401px, rgba(255,236,206,0.63), transparent),
radial-gradient(2px 2px at 202px 205px, rgba(190,214,255,0.49), transparent),
radial-gradient(2px 2px at 248px 326px, rgba(190,214,255,0.37), transparent),
radial-gradient(2px 2px at 36px 108px, rgba(190,214,255,0.41), transparent),
radial-gradient(2px 2px at 176px 309px, rgba(255,255,255,0.39), transparent),
radial-gradient(2px 2px at 292px 79px, rgba(255,236,206,0.39), transparent),
radial-gradient(2px 2px at 188px 316px, rgba(255,255,255,0.37), transparent);
background-size: 460px 460px;
animation: cielo-titila 7.5s ease-in-out infinite -2.5s, cielo-deriva 380s linear infinite;
}
/* Capa 3 · las más lejanas, casi apagadas */
html[data-arranque="noche"] .cielo::after {
background-image:
radial-gradient(2px 2px at 214px 630px, rgba(255,255,255,0.24), transparent),
radial-gradient(2px 2px at 260px 357px, rgba(255,255,255,0.32), transparent),
radial-gradient(2px 2px at 120px 501px, rgba(255,255,255,0.32), transparent),
radial-gradient(2px 2px at 321px 89px, rgba(190,214,255,0.23), transparent),
radial-gradient(2px 2px at 352px 273px, rgba(255,255,255,0.41), transparent),
radial-gradient(2px 2px at 167px 530px, rgba(190,214,255,0.25), transparent),
radial-gradient(2px 2px at 542px 372px, rgba(190,214,255,0.37), transparent),
radial-gradient(2px 2px at 29px 542px, rgba(255,255,255,0.44), transparent),
radial-gradient(2px 2px at 95px 269px, rgba(255,255,255,0.43), transparent),
radial-gradient(2px 2px at 366px 230px, rgba(255,255,255,0.36), transparent),
radial-gradient(2px 2px at 629px 201px, rgba(190,214,255,0.4), transparent);
background-size: 640px 640px;
animation: cielo-titila 9s ease-in-out infinite -5s, cielo-deriva 520s linear infinite;
}
@keyframes cielo-titila { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes cielo-deriva { to { background-position: 300px -180px } }
/* ── ESTRELLAS FUGACES ─────────────────────────────────────────────────────
Poco frecuentes a propósito: si cruzan cada dos segundos dejan de ser un
detalle y se vuelven ruido. Cada una recorre su diagonal y espera turno. */
html[data-arranque="noche"] .fugaz {
position: absolute;
width: 140px; height: 1.5px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(190,220,255,.55) 45%, rgba(255,255,255,.95) 100%);
filter: drop-shadow(0 0 5px rgba(140,190,255,.75));
opacity: 0;
transform: rotate(24deg);
}
html[data-arranque="noche"] .fugaz.a { top: 12%; left: -180px; animation: fugaz-cruza 9s ease-in infinite 1.5s; }
html[data-arranque="noche"] .fugaz.b { top: 34%; left: -180px; animation: fugaz-cruza 13s ease-in infinite 6s; }
html[data-arranque="noche"] .fugaz.c { top: 68%; left: -180px; animation: fugaz-cruza 17s ease-in infinite 11s; }
@keyframes fugaz-cruza {
0% { opacity: 0; transform: translate(0,0) rotate(24deg); }
2% { opacity: 1; }
14% { opacity: 1; }
18% { opacity: 0; transform: translate(78vw, 34vw) rotate(24deg); }
100% { opacity: 0; transform: translate(78vw, 34vw) rotate(24deg); }
}
/* Con "reducir movimiento" el cielo se queda quieto: estrellas sí, tráfico no. */
@media (prefers-reduced-motion: reduce) {
html[data-arranque="noche"] .cielo::before,
html[data-arranque="noche"] .cielo::after,
html[data-arranque="noche"] .cielo > .polvo { animation: none; }
html[data-arranque="noche"] .fugaz { display: none; }
}
/* El contenido va por encima del cielo. */
.zen-wrap, .boot-acto { position: relative; z-index: 1; }
/* ══════════════════════════════════════════════════════════════════════════
EL CIELO DE DÍA — no hay
──────────────────────────────────────────────────────────────────────────
Aquí vivían cuatro escenas espaciales que se sorteaban en cada carga (sol,
tierra desde la órbita, sistema solar y eclipse anular). Se quitaron el
7-ago-2026: estorbaban y no aportaban. El login de día se queda limpio.
La NOCHE sí conserva su cielo estrellado, que está más arriba en este mismo
archivo y no se tocó.
Los seis huecos del marcado (`.cielo`, `.polvo`, `.fugaz`) siguen en el HTML
porque los usa la noche; de día simplemente no se pintan.
══════════════════════════════════════════════════════════════════════════ */
html[data-arranque="dia"] .cielo,
html[data-arranque="dia"] .fugaz { display: none; }