/* ==========================================================================
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 — cuatro escenas, una al azar en cada carga
──────────────────────────────────────────────────────────────────────────
La noche mira HACIA AFUERA: estrellas lejanas y algún meteoro de paso. El
día tenía que mirar hacia otro lado, o sería la misma escena repintada.
REGLA QUE MANDA SOBRE TODO LO DEMÁS: de día la tinta es oscura. Ninguna
escena puede llenar la pantalla de negro por bonita que sea, porque el
login dejaría de leerse. Por eso las cuatro son MOTIVOS sobre el papel
claro —una esquina, un borde, un anillo— y el centro, donde vive el
logotipo, se queda respirando.
El sorteo lo hace el script del (atributo `data-cielo`). Se decide
antes de las hojas de estilo para que la primera pintura ya sea la buena.
Nada de esto toca el logotipo ni su animación: `.zen-wrap` va en z-index 1
y el cielo en 0, igual que de noche.
Se reutilizan los mismos seis huecos que ya existen en el HTML —`.cielo`
con sus dos pseudos, `.polvo` y tres `.fugaz`— en vez de inventar nodos:
así el login no cambia de forma según la hora.
────────────────────────────────────────────────────────────────────────── */
html[data-arranque="dia"] .cielo {
display: block;
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* ── 1 · EL SOL ────────────────────────────────────────────────────────────
El paralelo directo de la noche: si de noche miras estrellas lejanas, de
día miras la tuya. La corona late y de vez en cuando se asoma una
llamarada por el borde — el equivalente diurno del meteoro. */
html[data-arranque="dia"][data-cielo="sol"] .cielo {
background:
radial-gradient(60vmax 60vmax at 82% -6%, rgba(255,196,92,.30), transparent 62%),
radial-gradient(90vmax 70vmax at 50% 120%, rgba(120,180,255,.14), transparent 70%);
}
/* El disco. Nunca blanco puro: deslumbra y se come el borde. */
html[data-arranque="dia"][data-cielo="sol"] .cielo::before {
content: ""; position: absolute;
top: -12vmin; right: -6vmin;
width: 46vmin; height: 46vmin; border-radius: 50%;
background: radial-gradient(circle,
rgba(255,250,235,.95) 0%, rgba(255,222,150,.85) 34%,
rgba(255,186,86,.42) 56%, rgba(255,170,60,0) 74%);
animation: sol-late 9s ease-in-out infinite;
}
/* Los rayos: una rueda de sectores girando despacísimo, casi transparente.
Con más opacidad se convierte en un sol de guardería. */
html[data-arranque="dia"][data-cielo="sol"] .cielo::after {
content: ""; position: absolute;
top: -46vmin; right: -40vmin;
width: 110vmin; height: 110vmin;
background: repeating-conic-gradient(from 0deg,
rgba(255,205,120,.10) 0deg 4deg, transparent 4deg 14deg);
-webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
mask-image: radial-gradient(circle, #000 12%, transparent 62%);
animation: sol-gira 220s linear infinite;
}
/* Motas de polvo subiendo en el aire, como en un rayo de luz por la ventana. */
html[data-arranque="dia"][data-cielo="sol"] .cielo > .polvo {
content: ""; position: absolute; inset: -20%;
background-image:
radial-gradient(1.5px 1.5px at 18% 34%, rgba(255,206,130,.55), transparent),
radial-gradient(1px 1px at 62% 71%, rgba(255,190,110,.45), transparent),
radial-gradient(2px 2px at 79% 22%, rgba(255,214,150,.40), transparent),
radial-gradient(1px 1px at 34% 88%, rgba(255,198,120,.50), transparent),
radial-gradient(1.5px 1.5px at 88% 58%, rgba(255,206,130,.35), transparent),
radial-gradient(1px 1px at 8% 62%, rgba(255,190,110,.42), transparent);
background-size: 42vmin 42vmin;
animation: polvo-sube 70s linear infinite;
}
/* Llamaradas: nacen pegadas al disco y se apagan. Espaciadas a propósito. */
html[data-arranque="dia"][data-cielo="sol"] .fugaz {
position: absolute;
top: 6vmin; right: 14vmin;
width: 16vmin; height: 5vmin;
border-radius: 50% 50% 50% 50% / 100% 100% 0 0;
background: linear-gradient(180deg, rgba(255,168,60,.55), rgba(255,120,40,0));
filter: blur(1px);
opacity: 0; transform-origin: 50% 100%;
}
html[data-arranque="dia"][data-cielo="sol"] .fugaz.a { animation: llamarada 14s ease-out infinite 2s; }
html[data-arranque="dia"][data-cielo="sol"] .fugaz.b { top: 16vmin; right: 3vmin; transform: rotate(58deg); animation: llamarada 19s ease-out infinite 9s; }
html[data-arranque="dia"][data-cielo="sol"] .fugaz.c { top: -2vmin; right: 26vmin; transform: rotate(-38deg); animation: llamarada 23s ease-out infinite 15s; }
@keyframes sol-late { 0%,100% { opacity:.88; transform:scale(1) } 50% { opacity:1; transform:scale(1.045) } }
@keyframes sol-gira { to { transform: rotate(360deg) } }
@keyframes polvo-sube { to { transform: translateY(-42vmin) } }
@keyframes llamarada {
0%, 6% { opacity: 0; transform: scaleY(.35) }
10% { opacity: .85; }
16% { opacity: .5; transform: scaleY(1.15) }
22%, 100%{ opacity: 0; transform: scaleY(1.3) }
}
/* ── 2 · LA TIERRA DESDE LA ÓRBITA ─────────────────────────────────────────
El planeta asoma por ABAJO, no ocupa la pantalla: el cielo se queda claro
arriba, donde está el logotipo. Las nubes cruzan en minuto y medio, que a
ojo parece quieto y sin embargo se nota si te fijas. */
html[data-arranque="dia"][data-cielo="tierra"] .cielo {
background: radial-gradient(120vmax 80vmax at 50% 128%, rgba(96,164,255,.22), transparent 62%);
}
/* La curva del planeta. */
html[data-arranque="dia"][data-cielo="tierra"] .cielo::before {
content: ""; position: absolute;
left: 50%; bottom: -128vmin;
width: 190vmin; height: 190vmin; margin-left: -95vmin;
border-radius: 50%;
background:
radial-gradient(60vmin 40vmin at 38% 22%, rgba(126,196,140,.34), transparent 70%),
radial-gradient(44vmin 30vmin at 72% 40%, rgba(150,206,158,.26), transparent 70%),
linear-gradient(180deg, rgba(118,182,255,.62), rgba(44,110,190,.50));
}
/* La atmósfera: un filo de luz sobre la curva. Es el detalle que hace que
parezca un planeta y no un círculo azul. */
html[data-arranque="dia"][data-cielo="tierra"] .cielo::after {
content: ""; position: absolute;
left: 50%; bottom: -128vmin;
width: 194vmin; height: 194vmin; margin-left: -97vmin;
border-radius: 50%;
box-shadow: 0 0 6vmin 1.4vmin rgba(168,214,255,.55) inset,
0 0 8vmin 2vmin rgba(150,205,255,.30);
background: transparent;
}
/* Nubes cruzando. */
html[data-arranque="dia"][data-cielo="tierra"] .cielo > .polvo {
content: ""; position: absolute;
left: -60%; right: -60%; bottom: 0; height: 46vmin;
background-image:
radial-gradient(14vmin 4vmin at 12% 62%, rgba(255,255,255,.50), transparent 70%),
radial-gradient(10vmin 3vmin at 34% 74%, rgba(255,255,255,.42), transparent 70%),
radial-gradient(18vmin 5vmin at 58% 58%, rgba(255,255,255,.38), transparent 70%),
radial-gradient(9vmin 3vmin at 77% 78%, rgba(255,255,255,.45), transparent 70%),
radial-gradient(13vmin 4vmin at 92% 66%, rgba(255,255,255,.36), transparent 70%);
animation: nubes-cruzan 95s linear infinite;
}
/* Motas de luz muy tenues arriba: el espacio se insinúa, no se impone. */
html[data-arranque="dia"][data-cielo="tierra"] .fugaz {
position: absolute; width: 2px; height: 2px; border-radius: 50%;
background: rgba(120,150,190,.45);
box-shadow: 0 0 4px rgba(120,150,190,.35);
}
html[data-arranque="dia"][data-cielo="tierra"] .fugaz.a { top: 14%; left: 22%; animation: destello 6s ease-in-out infinite; }
html[data-arranque="dia"][data-cielo="tierra"] .fugaz.b { top: 9%; left: 71%; animation: destello 8s ease-in-out infinite -3s; }
html[data-arranque="dia"][data-cielo="tierra"] .fugaz.c { top: 21%; left: 86%; animation: destello 11s ease-in-out infinite -6s; }
@keyframes nubes-cruzan { to { transform: translateX(28vmin) } }
@keyframes destello { 0%,100% { opacity:.25 } 50% { opacity:.75 } }
/* ── 3 · EL SISTEMA SOLAR ──────────────────────────────────────────────────
Órbitas en línea fina detrás del logotipo, con cuatro cuerpos girando.
Las velocidades guardan la proporción real: Mercurio da la vuelta mientras
el de más afuera casi no se mueve. Ese detalle no lo va a notar nadie, y
por eso mismo vale la pena.
Truco: cada planeta es un círculo del tamaño de su órbita, centrado, que
gira; el punto de color es su `::before`, pegado al borde de arriba. */
html[data-arranque="dia"][data-cielo="solar"] .cielo {
background: radial-gradient(70vmax 70vmax at 50% 46%, rgba(255,214,150,.20), transparent 60%);
}
/* Las órbitas, todas en un solo fondo. */
html[data-arranque="dia"][data-cielo="solar"] .cielo::before {
content: ""; position: absolute;
left: 50%; top: 46%;
width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin;
border-radius: 50%;
background:
radial-gradient(circle, transparent 0 15.9vmin, rgba(120,132,152,.20) 15.9vmin 16vmin, transparent 16vmin),
radial-gradient(circle, transparent 0 23.9vmin, rgba(120,132,152,.17) 23.9vmin 24vmin, transparent 24vmin),
radial-gradient(circle, transparent 0 33.9vmin, rgba(120,132,152,.14) 33.9vmin 34vmin, transparent 34vmin),
radial-gradient(circle, transparent 0 44.9vmin, rgba(120,132,152,.11) 44.9vmin 45vmin, transparent 45vmin);
}
/* El sol, en el centro de todo. */
html[data-arranque="dia"][data-cielo="solar"] .cielo::after {
content: ""; position: absolute;
left: 50%; top: 46%;
width: 7vmin; height: 7vmin; margin: -3.5vmin 0 0 -3.5vmin;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,246,220,.95), rgba(255,196,88,.65) 55%, rgba(255,170,60,0) 78%);
animation: sol-late 11s ease-in-out infinite;
}
html[data-arranque="dia"][data-cielo="solar"] .fugaz,
html[data-arranque="dia"][data-cielo="solar"] .cielo > .polvo {
position: absolute; left: 50%; top: 46%;
border-radius: 50%; background: none;
transform-origin: 50% 50%;
}
html[data-arranque="dia"][data-cielo="solar"] .fugaz::before,
html[data-arranque="dia"][data-cielo="solar"] .cielo > .polvo::before {
content: ""; position: absolute;
left: 50%; top: -0.55vmin;
width: 1.1vmin; height: 1.1vmin; margin-left: -0.55vmin;
border-radius: 50%;
}
/* Órbita interior, la más rápida. */
html[data-arranque="dia"][data-cielo="solar"] .fugaz.a {
width: 32vmin; height: 32vmin; margin: -16vmin 0 0 -16vmin;
animation: orbita 26s linear infinite;
}
html[data-arranque="dia"][data-cielo="solar"] .fugaz.a::before { background: #c98f5e; }
html[data-arranque="dia"][data-cielo="solar"] .fugaz.b {
width: 48vmin; height: 48vmin; margin: -24vmin 0 0 -24vmin;
animation: orbita 66s linear infinite -12s;
}
html[data-arranque="dia"][data-cielo="solar"] .fugaz.b::before { background: #5b9fe0; width: 1.35vmin; height: 1.35vmin; margin-left: -0.68vmin; }
html[data-arranque="dia"][data-cielo="solar"] .fugaz.c {
width: 68vmin; height: 68vmin; margin: -34vmin 0 0 -34vmin;
animation: orbita 124s linear infinite -40s;
}
html[data-arranque="dia"][data-cielo="solar"] .fugaz.c::before { background: #c26a4a; }
/* La de más afuera: enorme y lentísima, casi un adorno quieto. */
html[data-arranque="dia"][data-cielo="solar"] .cielo > .polvo {
width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin;
animation: orbita 300s linear infinite -90s;
}
html[data-arranque="dia"][data-cielo="solar"] .cielo > .polvo::before {
background: #d8b071; width: 1.7vmin; height: 1.7vmin; margin-left: -0.85vmin;
box-shadow: 0 0 0 .35vmin rgba(216,176,113,.22);
}
@keyframes orbita { to { transform: rotate(360deg) } }
/* ── 4 · EL ECLIPSE ────────────────────────────────────────────────────────
Aquí hubo que cambiar el plan. Un eclipse total es un disco NEGRO sobre
cielo oscuro, y eso dejaba el login ilegible en modo día. Así que es un
eclipse ANULAR —el "anillo de fuego"—: la luna no alcanza a tapar el sol y
queda un aro encendido. Se lee igual de bien sobre papel claro y sigue
siendo el fenómeno más bonito de los cuatro. */
html[data-arranque="dia"][data-cielo="eclipse"] .cielo {
background:
radial-gradient(52vmax 52vmax at 78% 12%, rgba(255,180,80,.20), transparent 60%),
radial-gradient(100vmax 80vmax at 30% 110%, rgba(88,120,180,.13), transparent 70%);
}
/* El anillo. */
html[data-arranque="dia"][data-cielo="eclipse"] .cielo::before {
content: ""; position: absolute;
top: 8vmin; right: 12vmin;
width: 22vmin; height: 22vmin; border-radius: 50%;
background: radial-gradient(circle,
rgba(60,52,44,.92) 0 62%,
rgba(255,236,190,.98) 62% 70%,
rgba(255,198,110,.55) 70% 78%,
rgba(255,180,80,0) 84%);
animation: aro-late 7s ease-in-out infinite;
}
/* La corona alrededor, ondulando. */
html[data-arranque="dia"][data-cielo="eclipse"] .cielo::after {
content: ""; position: absolute;
top: -6vmin; right: -2vmin;
width: 50vmin; height: 50vmin; border-radius: 50%;
background: repeating-conic-gradient(from 0deg,
rgba(255,214,150,.14) 0deg 3deg, transparent 3deg 11deg);
-webkit-mask-image: radial-gradient(circle, transparent 21%, #000 27%, transparent 52%);
mask-image: radial-gradient(circle, transparent 21%, #000 27%, transparent 52%);
animation: sol-gira 160s linear infinite reverse;
}
/* Perlas de Baily: los destellos que se cuelan por los valles de la luna. */
html[data-arranque="dia"][data-cielo="eclipse"] .fugaz {
position: absolute; width: 1.1vmin; height: 1.1vmin; border-radius: 50%;
background: rgba(255,244,214,.95);
box-shadow: 0 0 1.6vmin .5vmin rgba(255,214,140,.65);
opacity: 0;
}
html[data-arranque="dia"][data-cielo="eclipse"] .fugaz.a { top: 8.6vmin; right: 22.4vmin; animation: perla 12s ease-in-out infinite 1s; }
html[data-arranque="dia"][data-cielo="eclipse"] .fugaz.b { top: 28.6vmin; right: 21.2vmin; animation: perla 17s ease-in-out infinite 7s; }
html[data-arranque="dia"][data-cielo="eclipse"] .fugaz.c { top: 19vmin; right: 32.6vmin; animation: perla 21s ease-in-out infinite 13s; }
/* Estrellas tímidas: durante un eclipse el cielo oscurece lo justo para que
asomen. Aquí apenas se insinúan. */
html[data-arranque="dia"][data-cielo="eclipse"] .cielo > .polvo {
content: ""; position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 14% 62%, rgba(120,140,180,.40), transparent),
radial-gradient(1px 1px at 41% 28%, rgba(120,140,180,.32), transparent),
radial-gradient(1px 1px at 66% 74%, rgba(120,140,180,.36), transparent),
radial-gradient(1px 1px at 27% 84%, rgba(120,140,180,.28), transparent);
animation: destello 9s ease-in-out infinite;
}
@keyframes aro-late { 0%,100% { transform:scale(1); opacity:.94 } 50% { transform:scale(1.03); opacity:1 } }
@keyframes perla {
0%, 8% { opacity: 0 }
12% { opacity: 1 }
18% { opacity: .35 }
24%, 100% { opacity: 0 }
}
/* Con "reducir movimiento" el cielo de día se queda quieto, igual que el de
noche: la escena sigue ahí, pero nada se mueve ni parpadea. */
@media (prefers-reduced-motion: reduce) {
html[data-arranque="dia"] .cielo,
html[data-arranque="dia"] .cielo::before,
html[data-arranque="dia"] .cielo::after,
html[data-arranque="dia"] .cielo > .polvo { animation: none !important; }
html[data-arranque="dia"] .fugaz { display: none; }
/* Los planetas SÍ se quedan: sin ellos las órbitas se ven vacías. */
html[data-arranque="dia"][data-cielo="solar"] .fugaz { display: block; animation: none !important; }
}