/* fondo-inmersivo.css — fondo a sangre decorado (degradado teal→azul suave + blobs orgánicos + destellos) reutilizable en cualquier pantalla centrada. Lo usan el login y la pantalla de progreso de generación. Actívalo añadiendo la clase `fondo-inmersivo` al e incluyendo el partial `shared/ui/fondo_inmersivo.html`. */ body.fondo-inmersivo { position: relative; overflow: hidden; /* los blobs no generan scroll */ background: radial-gradient(1200px 700px at 15% -10%, hsl(var(--blue-light) / 0.28), transparent 60%), radial-gradient(1000px 800px at 110% 120%, hsl(var(--primary) / 0.20), transparent 55%), hsl(35 22% 97%); /* misma crema cálida del sistema */ } .lg-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .lg-blob { position: absolute; border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; filter: blur(6px); opacity: 0.5; } .lg-blob--1 { /* teal, arriba-izquierda */ width: 40vw; height: 40vw; max-width: 460px; max-height: 460px; top: -8%; left: -6%; background: radial-gradient(circle at 35% 35%, hsl(var(--primary) / 0.35), hsl(var(--primary) / 0.10)); } .lg-blob--2 { /* azul claro, abajo-derecha */ width: 46vw; height: 46vw; max-width: 520px; max-height: 520px; bottom: -12%; right: -8%; border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; background: radial-gradient(circle at 60% 40%, hsl(var(--blue-light) / 0.40), hsl(var(--blue-light) / 0.08)); } .lg-blob--3 { /* mango tenue, acento cálido medio */ width: 24vw; height: 24vw; max-width: 260px; max-height: 260px; top: 58%; left: 8%; border-radius: 50% 50% 55% 45% / 55% 45% 55% 45%; background: radial-gradient(circle at 50% 50%, hsl(var(--mango) / 0.22), hsl(var(--mango-soft) / 0.0)); opacity: 0.6; } /* Destellos ✦ decorativos */ .lg-spark { position: absolute; color: hsl(var(--primary) / 0.5); font-size: 1.4rem; line-height: 1; user-select: none; } .lg-spark--a { top: 16%; right: 18%; font-size: 1.8rem; color: hsl(var(--mango) / 0.55); } .lg-spark--b { bottom: 22%; left: 16%; font-size: 1.3rem; color: hsl(var(--primary) / 0.45); } .lg-spark--c { top: 30%; left: 10%; font-size: 1rem; color: hsl(var(--blue-light) / 0.7); } /* La tarjeta y el logo van por encima de la decoración */ body.fondo-inmersivo .logo-wrap, body.fondo-inmersivo .lg-head, body.fondo-inmersivo .card { position: relative; z-index: 1; } @media (max-width: 560px) { .lg-blob--3 { display: none; } /* fondo más simple en móvil */ .lg-spark--c { display: none; } }