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:

{
  "settings": {
    "theme": {
      "base": "automatic"
    }
  }
}

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

@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:

docker compose restart server

🎨 Personalización Adicional

Cambiar el Esquema de Color Base

Edita las variables CSS en nucleo-custom.css:

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

Modo Oscuro/Claro Forzado

En Brand > Attributes:

{
  "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