agregando archivos de customization

CUSTOMIZATION.md

@@ -0,0 +1,191 @@
+# 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*