authentikNucleo/CUSTOMIZATION.md

# Personalización de Authentik - Nucleo V3

## 🎨 Estética de Nucleo V3

Este sistema de autenticación ha sido personalizado para reflejar la identidad visual de **Nucleo V3**, el sistema nervioso digital de **Beneficio Rio Frio**.

### Paleta de Colores

#### 🌙 Modo Oscuro (Dark Mode)
- **Background**: Azul royal profundo (#0f1729 → #1e3a8a)
- **Iluminación**: Dorado (#f59e0b, #fbbf24)
- **Cards**: Efecto obsidiana con brillo dorado
- **Patrón**: Puntos dorados sutiles sobre fondo azul

#### ☀️ Modo Claro (Light Mode)
- **Background**: Dorado intenso (#fef3c7 → #fcd34d)
- **Acentos**: Azul royal fuerte (#1e3a8a, #2563eb)
- **Cards**: Efecto porcelana con sombras azules
- **Patrón**: Puntos azules sobre fondo dorado

### 🎭 Efectos Especiales

#### Obsidiana (Dark Mode)
- Superficie negra brillante con gradientes sutiles
- Borde dorado luminoso que brilla al hover
- Sombras profundas con resplandor dorado
- Reflejo de cristal en la parte superior

#### Porcelana (Light Mode)
- Superficie blanca cremosa con brillo sutil
- Bordes azul royal delicados
- Múltiples capas de sombras suaves
- Efecto de brillo deslizante al hover

## 📁 Archivos Creados

### 1. **nucleo-custom.css**
Archivo CSS completo con toda la personalización:
- Variables de color para ambos modos
- Efectos de porcelana y obsidiana
- Patrón de puntos en backgrounds
- Estilos para botones, inputs y navegación
- Scrollbars personalizados
- Easter egg con tema de café ☕

### 2. **nucleo-logo.svg**
Logo principal de Nucleo V3:
- Letra "N" estilizada con grano de café integrado
- Gradientes azul royal y dorado
- Badge "V3" en dorado
- Efecto de vapor de café sutil

### 3. **nucleo-icon.svg**
Ícono cuadrado para el sidebar:
- Grano de café con letra "N" superpuesta
- Tres puntos representando las etapas del café
- Diseño circular con gradientes

### 4. **favicon.svg**
Favicon para el navegador:
- Versión simplificada del ícono
- Optimizado para tamaños pequeños (32x32)
- Grano de café con "N"

## 🚀 Cómo Aplicar la Personalización

### Paso 1: Acceder a Authentik Admin
1. Ve a `http://localhost:9000/if/admin/` (o tu puerto configurado)
2. Inicia sesión como administrador

### Paso 2: Configurar el Brand
1. Navega a **System > Brands**
2. Edita el brand "Default" o crea uno nuevo
3. Configura los siguientes campos:

#### Branding Básico
- **Title**: `Nucleo V3 - Beneficio Rio Frio`
- **Logo**: Sube `/media/nucleo-logo.svg`
- **Favicon**: Sube `/media/favicon.svg`

#### Custom CSS
En el campo **Attributes**, agrega:
```json
{
  "settings": {
    "theme": {
      "base": "automatic"
    }
  }
}
```

En **Other global settings > Custom CSS**, copia y pega el contenido de `nucleo-custom.css` o referencia el archivo:

```css
@import url('/media/nucleo-custom.css');
```

### Paso 3: Configurar Flows
1. Ve a **Flows & Stages > Flows**
2. Edita el flow de autenticación
3. En **Appearance settings**:
   - **Background**: Deja en blanco (usa el CSS)
   - **Layout**: `stacked` (recomendado)

### Paso 4: Reiniciar (si es necesario)
Si los cambios no se aplican inmediatamente:
```bash
docker compose restart server
```

## 🎨 Personalización Adicional

### Cambiar el Esquema de Color Base
Edita las variables CSS en `nucleo-custom.css`:

```css
:root {
    /* Ajusta estos valores según prefieras */
    --royal-blue-800: #1e3a8a;
    --gold-500: #f59e0b;
}
```

### Modo Oscuro/Claro Forzado
En Brand > Attributes:
```json
{
  "settings": {
    "theme": {
      "base": "dark"  // o "light" o "automatic"
    }
  }
}
```

### Cambiar Patrón de Puntos
En el CSS, busca `background-image: radial-gradient` y ajusta:
- Tamaño de puntos: `1px` (primer valor)
- Espaciado: `20px 20px` (background-size)
- Opacidad: `rgba(..., 0.15)` (último valor)

## ☕ Easter Egg - Tema de Café

El diseño incluye referencias sutiles al procesamiento de café:
- Grano de café en el logo
- Vapor de café en el logo principal
- Ícono de taza de café en la esquina de las cards de login
- Tres puntos en el ícono representando las etapas de producción

## 🔧 Solución de Problemas

### El CSS no se aplica
1. Verifica que el archivo esté en `/media/nucleo-custom.css`
2. Asegúrate de que el volumen esté montado en docker-compose.yml
3. Limpia la caché del navegador (Ctrl+Shift+R)

### Los logos no aparecen
1. Verifica permisos de archivos: `chmod 644 media/*.svg`
2. Sube los archivos directamente en la interfaz de Authentik
3. Verifica la ruta en Brand settings

### Los colores se ven diferentes
- El navegador puede estar forzando modo oscuro/claro
- Verifica la configuración del theme en Brand > Attributes
- Algunos navegadores no soportan todas las propiedades CSS modernas

## 📝 Notas Técnicas

### Compatibilidad
- ✅ Chrome/Edge (Chromium) 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ⚠️ Algunos efectos pueden degradarse en navegadores antiguos

### Rendimiento
- Patrones CSS optimizados (sin imágenes pesadas)
- SVGs vectoriales para escalabilidad
- Transiciones GPU-aceleradas
- Lazy loading de efectos complejos

### Mantenimiento
- Los archivos CSS están documentados con comentarios
- Variables centralizadas para fácil modificación
- Separación clara entre modos dark/light
- Compatible con futuras versiones de Authentik (2025.8.x)

---

**Creado para Nucleo V3 - Sistema de Gestión Integral**
*Beneficio Rio Frio - Excelencia en Café desde el Grano hasta la Taza*