# Imagen de fondo del inicio de sesión

## Dónde va

```
estrategia/public/img/login-fondo.jpg
```

Ese es el nombre exacto. Basta con dejar el archivo ahí y recargar el navegador: no hay que compilar
ni reiniciar nada. Si el archivo no existe, la pantalla muestra el degradado verde institucional y se
ve bien igual, así que nunca queda rota.

## Medidas y formato

| Propiedad | Valor |
|---|---|
| Tamaño | 2560 × 2048 px (relación 5:4) |
| Mínimo aceptable | 1600 × 1280 px |
| Formato | JPG con calidad 80, o WebP |
| Peso | Menos de 600 KB (idealmente 300 KB) |
| Orientación | Horizontal, ligeramente apaisada |

El panel izquierdo ocupa el 70 % del ancho de la pantalla y toda la altura. En un monitor de
1920 × 1080 eso son 1344 × 1080 px, una relación de 1,24 a 1, que es justamente 5:4. La imagen se
recorta automáticamente al centro, así que los bordes pueden perderse: no ponga nada importante
en los extremos.

## Zona segura

Sobre la imagen se aplica un velo verde que va del 94 % de opacidad en el borde izquierdo al 55 % en
el derecho. Encima de ese velo van el logo, el titular y la lista de viñetas, ocupando
aproximadamente el 60 % izquierdo del panel.

Consecuencia práctica: **lo interesante de la imagen debe estar en el tercio derecho.** La mitad
izquierda debe ser tranquila y sin detalle fino, porque queda casi cubierta por el verde y encima
lleva texto blanco.

## Prompt recomendado

Pegue esto en el generador de imágenes:

```
Fotografía corporativa horizontal, relación de aspecto 5:4, luz natural cálida de media mañana.
Escena: un grupo pequeño de personas trabajadoras colombianas adultas, de entre 30 y 55 años,
mayoría mujeres, con ropa de trabajo sencilla y limpia, conversando de pie en un espacio luminoso
y moderno de una entidad de servicios financieros solidarios en la sabana de Bogotá. Al fondo,
ventanales amplios que dejan ver vegetación verde y cielo despejado.
Composición: el lado izquierdo del encuadre debe quedar limpio, en sombra suave y sin detalle,
como espacio negativo para colocar texto. Las personas y el punto de interés van en el tercio
derecho. Profundidad de campo media, fondo ligeramente desenfocado.
Paleta: verdes naturales, blancos cálidos y madera clara; acentos verde lima y ámbar muy discretos.
Estilo: fotografía documental corporativa realista, nada de aspecto de banco de imágenes forzado,
sin poses artificiales, sin miradas a la cámara.
Sin texto, sin letras, sin logotipos, sin marcas de agua, sin interfaces, sin gráficos superpuestos.
```

## Alternativa 1: territorio

Si prefiere no usar personas, esta opción funciona muy bien con el velo verde.

```
Fotografía aérea horizontal, relación de aspecto 5:4, tomada a poca altura al final de la tarde.
Escena: la sabana de occidente de Cundinamarca, Colombia: parcelas verdes de cultivo, invernaderos
de flores con cubiertas claras, caminos rurales y árboles dispersos, con la cordillera difuminada
en el horizonte. Luz dorada rasante, neblina suave en la distancia.
Composición: la mitad izquierda del encuadre debe ser una zona amplia y uniforme de campo verde,
sin detalle llamativo, para colocar texto encima. El detalle y el contraste van en el tercio derecho.
Paleta: verdes profundos y verdes lima, tierra ocre suave, cielo pálido.
Estilo: fotografía de paisaje realista, alta calidad, sin saturación exagerada.
Sin texto, sin letras, sin logotipos, sin marcas de agua, sin personas reconocibles.
```

## Alternativa 2: abstracta

La más segura si no quiere que la imagen compita con el mensaje.

```
Fondo abstracto corporativo horizontal, relación de aspecto 5:4.
Formas orgánicas superpuestas y translúcidas que sugieren capas de crecimiento y datos: curvas
suaves ascendentes, retículas muy tenues y partículas luminosas dispersas.
Composición: degradado que va de verde muy oscuro, casi negro, en el borde izquierdo, a verde
vivo y destellos verde lima en el borde derecho. El lado izquierdo debe ser plano y limpio.
Paleta exacta: #023B01, #046600, #53AF07, #C4EC1B, con un acento ámbar #FFBA00 muy puntual.
Estilo: minimalista, elegante, textura sutil tipo grano fino, sensación de profundidad.
Sin texto, sin letras, sin logotipos, sin figuras humanas, sin objetos reconocibles.
```

## Antes de darla por buena

1. Póngala en `public/img/login-fondo.jpg` y abra la pantalla de ingreso.
2. Compruebe que el titular blanco se lee sin esfuerzo. Si algo estorba, casi siempre es que el
   detalle quedó a la izquierda: pida la imagen de nuevo insistiendo en el espacio negativo.
3. Mire la pantalla en un portátil de 1366 px de ancho y en un monitor de 1920 px: el recorte cambia.
4. En celular el panel de la imagen no se muestra, así que no hay nada que revisar ahí.

## Si quiere cambiar el mensaje del panel

El titular, la bajada y las tres viñetas están en
`resources/js/Layouts/AuthLayout.vue`, en la parte de arriba del archivo. Después de editarlo hay
que recompilar:

```bash
docker compose -f docker/compose.yaml exec app npm run build
```