/*
 * NexoPlay · Fondo global Grafito · V1 · 2026-10-30
 * Fondo de marca de bajo contraste con marca de agua NexoPlay.
 * Las barras laterales, cabeceras, tarjetas, formularios y modales conservan
 * sus fondos propios para proteger la legibilidad. El fondo aparece detrás
 * del lienzo principal y en los espacios entre componentes.
 */

html {
  min-height: 100%;
  background-color: #0b0e13;
}

body:not(.nexo-light) {
  min-height: 100vh;
  background-color: #0b0e13 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(6, 9, 14, 0.22) 0%,
      rgba(6, 9, 14, 0.28) 52%,
      rgba(6, 9, 14, 0.36) 100%
    ),
    url("../assets/backgrounds/nexoplay-grafito-watermark.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Mantener el wallpaper visible detrás del contenido de todos los centros. */
body:not(.nexo-light) .app-shell,
body:not(.nexo-light) .main,
body:not(.nexo-light) .main > main {
  background-color: transparent !important;
  background-image: none !important;
}

/* El centro de afiliados y el de distribuidores tenían lienzos opacos propios. */
body:not(.nexo-light):has(.affiliate-sidebar) .main,
body:not(.nexo-light):has(.affiliate-sidebar) .main > main,
body:not(.nexo-light):has(.distributor-sidebar) .app-shell {
  background: transparent !important;
}

/* En pantallas pequeñas se mantiene el fondo fijo y centrado sin deformarlo. */
@media (max-width: 720px) {
  body:not(.nexo-light) {
    background-position: center top !important;
    background-size: auto 100vh !important;
    background-attachment: fixed !important;
  }
}

/* Respeta la preferencia del sistema por reducir movimiento: no hay animación. */
@media (prefers-reduced-motion: reduce) {
  body:not(.nexo-light) {
    background-attachment: scroll !important;
  }
}