/* Fondo espacial: estrellas en capas y nebulosas, sólo CSS.
   Lo usan el inicio (index.php) y el panel de Rubi (chat/panel/).
   Marcado: <div class="espacio"> con .estrellas.e1/.e2/.e3 y .nebulosa.n1/.n2 */

.espacio {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 120%, #1a1240 0%, #0a0a1f 45%, #05060d 100%);
}

/* Debajo del fondo: en iOS, con el teclado abierto, Safari corre la vista más
   abajo que la pantalla y se veía una franja lisa. Esto sigue el fondo hacia
   abajo con el mismo tono del borde inferior. */
.espacio::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #120d2e 0%, #0a0a1f 60%, #05060d 100%);
}

/* Cada capa de estrellas es un mosaico de puntitos hecho con gradientes;
   las tres se mueven a distinta velocidad y titilan. */
.estrellas {
    position: absolute;
    inset: -50% 0 0 0;
    background-repeat: repeat;
}
.estrellas.e1 {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1px 1px at 200px 160px, #fff, transparent),
        radial-gradient(1px 1px at 60px 210px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 250px 40px, rgba(255, 255, 255, .9), transparent);
    background-size: 280px 240px;
    opacity: .55;
    animation: deriva 140s linear infinite, titila 6s ease-in-out infinite alternate;
}
.estrellas.e2 {
    background-image:
        radial-gradient(1.5px 1.5px at 40px 60px, #cfc6ff, transparent),
        radial-gradient(1.5px 1.5px at 300px 200px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 170px 330px, #ffe2b8, transparent),
        radial-gradient(1.5px 1.5px at 380px 90px, #fff, transparent);
    background-size: 420px 380px;
    opacity: .7;
    animation: deriva 90s linear infinite, titila 4s ease-in-out infinite alternate-reverse;
}
.estrellas.e3 {
    background-image:
        radial-gradient(2px 2px at 100px 120px, #fff, transparent),
        radial-gradient(2.5px 2.5px at 460px 380px, #b9a6ff, transparent),
        radial-gradient(2px 2px at 600px 70px, #ffd59a, transparent);
    background-size: 700px 520px;
    animation: deriva 60s linear infinite, titila 3s ease-in-out infinite alternate;
}
@keyframes deriva { from { transform: translateY(0); } to { transform: translateY(33.3%); } }
@keyframes titila { from { filter: brightness(.7); } to { filter: brightness(1.3); } }

.nebulosa {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}
.nebulosa.n1 { width: 55vw; height: 55vw; left: -15vw; top: -20vw; background: radial-gradient(circle, #7F56F4, transparent 70%); animation: respira 18s ease-in-out infinite alternate; }
.nebulosa.n2 { width: 45vw; height: 45vw; right: -12vw; bottom: -18vw; background: radial-gradient(circle, #F6940F, transparent 70%); opacity: .22; animation: respira 22s ease-in-out infinite alternate-reverse; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.15) translate(2vw, 2vw); } }

@media (max-width: 768px) {
    .nebulosa.n1 { width: 90vw; height: 90vw; }
}
@media (prefers-reduced-motion: reduce) {
    .estrellas, .nebulosa { animation: none; }
}