Los fondos de la aplicación (imagen de red/nebulosa y su velo superpuesto) fueron definidos y aprobados en reunión con gerencia, con la participación de:
⚠️ Estos fondos NO se pueden tocar. Cualquier modificación de las imágenes, su ruta, el velo o su comportamiento visual debe pasar de nuevo por gerencia. Posteriormente se migrará a la versión dinámica.
Cada pantalla del selector (empresa y módulos) monta dos capas que viven por detrás del contenido:
| Capa | Clase | Rol |
|---|---|---|
| Imagen | .network-background |
Pinta la nebulosa de fondo |
| Velo | .background-overlay |
Atenúa la imagen para que el texto sea legible |
Ambas están ancladas al host (position: absolute; inset: 0) y no capturan el puntero (pointer-events: none), de modo que nunca interfieren con botones, tarjetas ni buscadores.
El contenido real (.selector30, .products-container, .companies-layout) se apila por encima con position: relative; z-index: 2.
La imagen cambia según el modo oscuro, decidido por el ThemeService (isDarkMode()), no por la pantalla:
html
[style.background-image]="
'url(' +
(isDarkMode()
? 'assets/shell/wallpapers/nebula-background-dark.png'
: 'assets/shell/wallpapers/nebula-background-light.png') +
')'
"
svgsvg
El velo también se adapta:
scss
.background-overlay {
background: rgba(255, 255, 255, 0.4); // modo claro
&--dark {
background: rgba(0, 0, 0, 0.5); // modo oscuro
}
}
svgsvg
| Modo | Imagen | Velo |
|---|---|---|
| Claro | nebula-background-light.png |
Blanco al 40 % |
| Oscuro | nebula-background-dark.png |
Negro al 50 % |
La clase background-overlay--dark se aplica condicionalmente con [class.background-overlay--dark]="isDarkMode()".
scss
:host {
display: block;
position: relative;
min-height: stretch;
overflow: hidden;
}
.network-background {
position: absolute;
inset: 0;
background-size: cover; // cubre sin deformar
background-position: center; // centrado
background-repeat: no-repeat;
z-index: 0;
pointer-events: none;
}
.background-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
svgsvg
Puntos clave:
background-size: cover → la imagen siempre cubre el contenedor, recortando lo que sobre.background-position: center → el encuadre se mantiene centrado en cualquier resolución.position: absolute (no fixed) → el fondo queda contenido en el host y no escapa al layout.overflow: hidden en el host → evita desbordes de la imagen.Cuando el perfil visual es 3.0 (html.ui-3-0), el contenedor de productos no debe pintar su propio color opaco, porque taparía la nebulosa:
scss
:host-context(html.ui-3-0) {
.products-container {
background: transparent;
}
}
svgsvg
El layout de empresas ya usa background-color: transparent de forma nativa.
| Archivo | Contenido |
|---|---|
products.component.html |
Capas .network-background y .background-overlay |
products.component.scss |
Reglas de las capas + :host |
company.component.html |
Mismas capas para la pantalla de empresas |
company.component.scss |
Reglas equivalentes |
El bloque de fondo está duplicado a propósito en ambas pantallas, bajo el comentario
/* ─── Fondo Nebula (compartido por ambos perfiles) ─── */.
□
Migración del fondo estático a la versión dinámica (fuera del alcance de este documento).
□
Mientras tanto: prohibido alterar imágenes, rutas, velo o reglas :host del fondo.
Documento de referencia interna. Cualquier cambio sobre los fondos requiere nueva aprobación de gerencia.
This response is AI-generated, for reference only.
arma el .md para descargar
No puedo generar archivos descargables directamente, pero aquí tienes el contenido listo para copiar y guardar como fondos-nebula.md. Solo copia todo el bloque de abajo, pégalo en un archivo nuevo con esa extensión y listo.
markdown
# Fondos Nebula — Documentación de funcionalidad
## Contexto y decisión
Los fondos de la aplicación (imagen de red/nebulosa y su velo superpuesto) fueron **definidos y aprobados en reunión con gerencia**, con la participación de:
- **Juan**
- **Alejandra**
- **Mauricio**
- **Isabela**
> ⚠️ **Estos fondos NO se pueden tocar.** Cualquier modificación de las imágenes, su ruta, el velo o su comportamiento visual debe pasar de nuevo por gerencia. Posteriormente se migrará a la **versión dinámica**.
---
## 1. Qué hace el fondo
Cada pantalla del selector (empresa y módulos) monta **dos capas** que viven por detrás del contenido:
| Capa | Clase | Rol |
|------|-------|-----|
| Imagen | `.network-background` | Pinta la nebulosa de fondo |
| Velo | `.background-overlay` | Atenúa la imagen para que el texto sea legible |
Ambas están ancladas al host (`position: absolute; inset: 0`) y **no capturan el puntero** (`pointer-events: none`), de modo que nunca interfieren con botones, tarjetas ni buscadores.
El contenido real (`.selector30`, `.products-container`, `.companies-layout`) se apila por encima con `position: relative; z-index: 2`.
---
## 2. Comportamiento según el tema (claro / oscuro)
La imagen cambia **según el modo oscuro**, decidido por el `ThemeService` (`isDarkMode()`), no por la pantalla:
```html
[style.background-image]="
'url(' +
(isDarkMode()
? 'assets/shell/wallpapers/nebula-background-dark.png'
: 'assets/shell/wallpapers/nebula-background-light.png') +
')'
"
svgsvg
El velo también se adapta:
scss
.background-overlay {
background: rgba(255, 255, 255, 0.4); // modo claro
&--dark {
background: rgba(0, 0, 0, 0.5); // modo oscuro
}
}
svgsvg
| Modo | Imagen | Velo |
|---|---|---|
| Claro | nebula-background-light.png |
Blanco al 40 % |
| Oscuro | nebula-background-dark.png |
Negro al 50 % |
La clase background-overlay--dark se aplica condicionalmente con [class.background-overlay--dark]="isDarkMode()".
scss
:host {
display: block;
position: relative;
min-height: stretch;
overflow: hidden;
}
.network-background {
position: absolute;
inset: 0;
background-size: cover; // cubre sin deformar
background-position: center; // centrado
background-repeat: no-repeat;
z-index: 0;
pointer-events: none;
}
.background-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
svgsvg
Puntos clave:
background-size: cover → la imagen siempre cubre el contenedor, recortando lo que sobre.background-position: center → el encuadre se mantiene centrado en cualquier resolución.position: absolute (no fixed) → el fondo queda contenido en el host y no escapa al layout.overflow: hidden en el host → evita desbordes de la imagen.Cuando el perfil visual es 3.0 (html.ui-3-0), el contenedor de productos no debe pintar su propio color opaco, porque taparía la nebulosa:
scss
:host-context(html.ui-3-0) {
.products-container {
background: transparent;
}
}
svgsvg
El layout de empresas ya usa background-color: transparent de forma nativa.
| Archivo | Contenido |
|---|---|
products.component.html |
Capas .network-background y .background-overlay |
products.component.scss |
Reglas de las capas + :host |
company.component.html |
Mismas capas para la pantalla de empresas |
company.component.scss |
Reglas equivalentes |
El bloque de fondo está duplicado a propósito en ambas pantallas, bajo el comentario
/* ─── Fondo Nebula (compartido por ambos perfiles) ─── */.
□
Migración del fondo estático a la versión dinámica (fuera del alcance de este documento).
□
Mientras tanto: prohibido alterar imágenes, rutas, velo o reglas :host del fondo.
Documento de referencia interna. Cualquier cambio sobre los fondos requiere nueva aprobación de gerencia.
text