@use "tokens" as *;

// Imagen de fondo de la página del CRM (patrón CDL): capa fija a toda la
// ventana tras el contenido; la intensidad la decide el tema activo
// (--page-bg-opacity: 0.2 en claro, 0.1 en oscuro) y un grayscale suave
// evita que compita con el contenido.
.page-background {
  position: fixed;
  // El TOP de la imagen queda justo debajo del header de la página: el
  // LAYOUT (cascarón) define --page-background-top con la altura real de su
  // site-header (si es estable por CSS, en scss; si no, medida con JS).
  // Sin definirla vale 0px: comportamiento de siempre (toda la ventana).
  top: var(--page-background-top, 0px);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--page-background-top, 0px)); // fallback
  // altura SIN la barra del navegador móvil
  height: calc(100lvh - var(--page-background-top, 0px));
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
  opacity: var(--page-bg-opacity, 0.15);
  filter: grayscale(60%);
  transition: opacity 0.3s ease;
}