/* ============================================================================
   background.css — fondo de la plataforma: aurora + trama de puntos.
   Fuente única; llega a todos los módulos por el @import de topbar.css.

   Capas fijas detrás del contenido (z-index -1 dentro del body, que se aísla),
   solo con tokens del tema así cambian solas con claro/oscuro:
   - body::before  manchas de luz en acento/info/aviso que derivan lento;
   - body::after   trama de puntos que se desvanece hacia abajo;
   - .fondo-puntos-cursor  la misma trama en acento, visible solo alrededor del
     cursor. La crea y la mueve public/js/background.js (`--mx`/`--my`, punto exacto).
   Se ve donde el módulo deja ver el body; lo que tiene fondo opaco propio
   (tarjetas, tablas, paneles) lo tapa, y así el contraste del texto no cambia.
   ============================================================================ */

body { isolation: isolate; }

body::before,
body::after,
.fondo-puntos-cursor {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: -20%;
  background:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--ap-accent) 36%, transparent), transparent 70%),
    radial-gradient(34% 38% at 82% 18%, color-mix(in srgb, var(--ap-info) 28%, transparent), transparent 70%),
    radial-gradient(40% 44% at 70% 82%, color-mix(in srgb, var(--ap-accent) 26%, transparent), transparent 70%),
    radial-gradient(30% 34% at 22% 85%, color-mix(in srgb, var(--ap-warning) 22%, transparent), transparent 70%),
    radial-gradient(26% 30% at 50% 50%, color-mix(in srgb, var(--ap-info) 12%, transparent), transparent 70%);
  filter: blur(40px) saturate(1.2);
  animation: aurora-deriva 22s ease-in-out infinite alternate;
}

body::after {
  background-image: radial-gradient(color-mix(in srgb, var(--ap-ink) 9%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  /* La máscara solo lee el alfa: cualquier color opaco sirve, va un token. */
  -webkit-mask-image: linear-gradient(to bottom, var(--ap-ink) 0%, transparent 75%);
          mask-image: linear-gradient(to bottom, var(--ap-ink) 0%, transparent 75%);
}

/* Arranca invisible: `.fondo-activo` en <html> la enciende con el primer movimiento
   del mouse. Sin JS, en táctil o con "reducir movimiento" no aparece. */
.fondo-puntos-cursor {
  opacity: 0;
  transition: opacity .6s ease;
  background-image: radial-gradient(color-mix(in srgb, var(--ap-accent) 70%, transparent) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(180px circle at var(--mx, -999px) var(--my, -999px), var(--ap-ink), transparent 75%);
          mask-image: radial-gradient(180px circle at var(--mx, -999px) var(--my, -999px), var(--ap-ink), transparent 75%);
}
html.fondo-activo .fondo-puntos-cursor { opacity: 1; }

@keyframes aurora-deriva {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Al imprimir (confirmaciones de cita, informes) el fondo no va. */
@media print {
  body::before, body::after, .fondo-puntos-cursor { display: none; }
}