agregando archivos de customization

2025-10-05 19:35:48 -06:00
parent 9044bada5c
commit d51ad0191e
6 changed files with 802 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -2,9 +2,13 @@
 .env

 # Authentik data directories
-media/
+# media/ - NOT ignored, contains branding assets
 certs/

+# But ignore uploaded user media (if any)
+media/public/
+media/private/
+
 # Docker volumes data (if using local binding)
 postgresql-data/
 redis-data/
--- a/CUSTOMIZATION.md
+++ b/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*
--- a/media/favicon.svg
+++ b/media/favicon.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <defs>
+    <linearGradient id="favGold" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f59e0b"/>
+      <stop offset="100%" style="stop-color:#d97706"/>
+    </linearGradient>
+    <linearGradient id="favBlue" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6"/>
+      <stop offset="100%" style="stop-color:#1e3a8a"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="32" height="32" rx="6" fill="url(#favBlue)"/>
+
+  <!-- Coffee bean -->
+  <ellipse cx="16" cy="16" rx="7" ry="10" fill="url(#favGold)" transform="rotate(20 16 16)"/>
+
+  <!-- Bean crease -->
+  <path d="M 16 9 Q 17.5 16, 16 23" stroke="#1e3a8a" stroke-width="1.5" fill="none"/>
+
+  <!-- "N" letter -->
+  <path d="M 11 10 L 11 22 M 11 10 L 21 22 M 21 10 L 21 22"
+        stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.9"/>
+</svg>
--- a/media/nucleo-custom.css
+++ b/media/nucleo-custom.css
@@ -0,0 +1,504 @@
+/**
+ * Nucleo V3 Custom Theme for Authentik
+ * Beneficio Rio Frio - Coffee Production System
+ *
+ * Color Palette:
+ * - Royal Blue: #1e3a8a (deep), #2563eb (standard), #3b82f6 (light)
+ * - Gold: #d97706 (dark), #f59e0b (standard), #fbbf24 (light)
+ * - Dark Mode: Deep royal blue background with gold illumination
+ * - Light Mode: Intense gold with strong royal blue accents
+ */
+
+:root {
+    /* Royal Blue Palette */
+    --royal-blue-900: #0f1729;
+    --royal-blue-800: #1e3a8a;
+    --royal-blue-700: #1d4ed8;
+    --royal-blue-600: #2563eb;
+    --royal-blue-500: #3b82f6;
+    --royal-blue-400: #60a5fa;
+    --royal-blue-300: #93c5fd;
+
+    /* Gold Palette */
+    --gold-900: #78350f;
+    --gold-800: #92400e;
+    --gold-700: #b45309;
+    --gold-600: #d97706;
+    --gold-500: #f59e0b;
+    --gold-400: #fbbf24;
+    --gold-300: #fcd34d;
+    --gold-200: #fde68a;
+
+    /* Obsidian (Dark Mode Cards) */
+    --obsidian-base: #0a0e1a;
+    --obsidian-light: #151b2e;
+    --obsidian-glow: rgba(245, 158, 11, 0.1);
+
+    /* Porcelain (Light Mode Cards) */
+    --porcelain-base: #fefefe;
+    --porcelain-shadow: rgba(30, 58, 138, 0.08);
+    --porcelain-border: rgba(30, 58, 138, 0.12);
+}
+
+/* ========================================
+   LIGHT MODE - Golden Elegance
+   ======================================== */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+    /* Background with dot pattern */
+    --pf-v5-global-BackgroundColor--100: #fef3c7;
+    --pf-v5-global-BackgroundColor--200: #fde68a;
+
+    /* Primary colors - Gold dominant */
+    --pf-v5-global-primary-color--100: var(--gold-600);
+    --pf-v5-global-primary-color--200: var(--gold-700);
+    --pf-v5-global-link-Color: var(--royal-blue-700);
+    --pf-v5-global-link-Color--hover: var(--royal-blue-800);
+
+    /* Accent - Royal Blue */
+    --pf-v5-global-active-color--100: var(--royal-blue-700);
+    --pf-v5-global-active-color--200: var(--royal-blue-800);
+
+    /* Text colors */
+    --pf-v5-global-Color--100: var(--royal-blue-900);
+    --pf-v5-global-Color--200: var(--royal-blue-800);
+
+    /* Border colors */
+    --pf-v5-global-BorderColor--100: var(--royal-blue-300);
+    --pf-v5-global-BorderColor--200: var(--royal-blue-400);
+}
+
+[data-theme="light"] body,
+:root:not([data-theme="dark"]) body {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
+    position: relative;
+}
+
+/* Dot pattern for light mode */
+[data-theme="light"] body::before,
+:root:not([data-theme="dark"]) body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(circle, rgba(30, 58, 138, 0.15) 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* Porcelain effect for cards in light mode */
+[data-theme="light"] .pf-v5-c-card,
+[data-theme="light"] .pf-v5-c-login__main,
+[data-theme="light"] .pf-v5-c-modal-box,
+[data-theme="light"] .ak-flow-executor,
+:root:not([data-theme="dark"]) .pf-v5-c-card,
+:root:not([data-theme="dark"]) .pf-v5-c-login__main,
+:root:not([data-theme="dark"]) .pf-v5-c-modal-box,
+:root:not([data-theme="dark"]) .ak-flow-executor {
+    background: var(--porcelain-base) !important;
+    border: 1px solid var(--porcelain-border) !important;
+    box-shadow:
+        0 1px 3px var(--porcelain-shadow),
+        0 10px 40px rgba(30, 58, 138, 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.9),
+        inset 0 -1px 0 rgba(30, 58, 138, 0.05) !important;
+    border-radius: 12px !important;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Subtle shine effect for porcelain */
+[data-theme="light"] .pf-v5-c-card::after,
+[data-theme="light"] .pf-v5-c-login__main::after,
+:root:not([data-theme="dark"]) .pf-v5-c-card::after,
+:root:not([data-theme="dark"]) .pf-v5-c-login__main::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        45deg,
+        transparent 30%,
+        rgba(255, 255, 255, 0.3) 50%,
+        transparent 70%
+    );
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+[data-theme="light"] .pf-v5-c-card:hover::after,
+[data-theme="light"] .pf-v5-c-login__main:hover::after,
+:root:not([data-theme="dark"]) .pf-v5-c-card:hover::after,
+:root:not([data-theme="dark"]) .pf-v5-c-login__main:hover::after {
+    opacity: 1;
+}
+
+/* ========================================
+   DARK MODE - Royal Depths with Gold Light
+   ======================================== */
+[data-theme="dark"] {
+    /* Background - Deep royal blue */
+    --pf-v5-global-BackgroundColor--100: var(--royal-blue-900);
+    --pf-v5-global-BackgroundColor--200: var(--royal-blue-800);
+
+    /* Primary colors - Gold illumination */
+    --pf-v5-global-primary-color--100: var(--gold-500);
+    --pf-v5-global-primary-color--200: var(--gold-400);
+    --pf-v5-global-link-Color: var(--gold-400);
+    --pf-v5-global-link-Color--hover: var(--gold-300);
+
+    /* Accent colors */
+    --pf-v5-global-active-color--100: var(--gold-500);
+    --pf-v5-global-active-color--200: var(--gold-400);
+
+    /* Text colors */
+    --pf-v5-global-Color--100: #f8fafc;
+    --pf-v5-global-Color--200: #e2e8f0;
+    --pf-v5-global-Color--300: var(--gold-300);
+
+    /* Border colors */
+    --pf-v5-global-BorderColor--100: rgba(245, 158, 11, 0.2);
+    --pf-v5-global-BorderColor--200: rgba(245, 158, 11, 0.3);
+}
+
+[data-theme="dark"] body {
+    background: linear-gradient(135deg, var(--royal-blue-900) 0%, #0f1e42 50%, var(--royal-blue-800) 100%);
+    position: relative;
+}
+
+/* Dot pattern for dark mode - illuminated by gold */
+[data-theme="dark"] body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(circle, rgba(245, 158, 11, 0.08) 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* Additional subtle glow pattern */
+[data-theme="dark"] body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* Obsidian effect for cards in dark mode */
+[data-theme="dark"] .pf-v5-c-card,
+[data-theme="dark"] .pf-v5-c-login__main,
+[data-theme="dark"] .pf-v5-c-modal-box,
+[data-theme="dark"] .ak-flow-executor {
+    background: linear-gradient(135deg, var(--obsidian-base) 0%, var(--obsidian-light) 100%) !important;
+    border: 1px solid rgba(245, 158, 11, 0.2) !important;
+    box-shadow:
+        0 0 1px rgba(245, 158, 11, 0.3),
+        0 4px 20px rgba(0, 0, 0, 0.5),
+        0 8px 40px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(245, 158, 11, 0.1),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
+        0 0 80px rgba(245, 158, 11, 0.05) !important;
+    border-radius: 12px !important;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Gold glow effect on hover */
+[data-theme="dark"] .pf-v5-c-card:hover,
+[data-theme="dark"] .pf-v5-c-login__main:hover {
+    border-color: rgba(245, 158, 11, 0.4) !important;
+    box-shadow:
+        0 0 2px rgba(245, 158, 11, 0.5),
+        0 4px 20px rgba(0, 0, 0, 0.5),
+        0 8px 40px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(245, 158, 11, 0.2),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
+        0 0 100px rgba(245, 158, 11, 0.1) !important;
+}
+
+/* Obsidian glass-like reflection */
+[data-theme="dark"] .pf-v5-c-card::before,
+[data-theme="dark"] .pf-v5-c-login__main::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    background: linear-gradient(
+        to bottom,
+        rgba(245, 158, 11, 0.05) 0%,
+        transparent 100%
+    );
+    pointer-events: none;
+}
+
+/* ========================================
+   BUTTONS & INTERACTIVE ELEMENTS
+   ======================================== */
+
+/* Primary buttons - Gold in dark, Royal blue in light */
+[data-theme="dark"] .pf-v5-c-button.pf-m-primary,
+[data-theme="dark"] button[type="submit"]:not(.pf-m-secondary) {
+    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%) !important;
+    border: 1px solid var(--gold-400) !important;
+    color: var(--royal-blue-900) !important;
+    font-weight: 600;
+    box-shadow:
+        0 0 10px rgba(245, 158, 11, 0.3),
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .pf-v5-c-button.pf-m-primary:hover,
+[data-theme="dark"] button[type="submit"]:not(.pf-m-secondary):hover {
+    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%) !important;
+    box-shadow:
+        0 0 20px rgba(245, 158, 11, 0.5),
+        0 6px 16px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+    transform: translateY(-1px);
+}
+
+[data-theme="light"] .pf-v5-c-button.pf-m-primary,
+[data-theme="light"] button[type="submit"]:not(.pf-m-secondary),
+:root:not([data-theme="dark"]) .pf-v5-c-button.pf-m-primary,
+:root:not([data-theme="dark"]) button[type="submit"]:not(.pf-m-secondary) {
+    background: linear-gradient(135deg, var(--royal-blue-700) 0%, var(--royal-blue-600) 100%) !important;
+    border: 1px solid var(--royal-blue-800) !important;
+    color: #ffffff !important;
+    font-weight: 600;
+    box-shadow:
+        0 0 10px rgba(30, 58, 138, 0.2),
+        0 4px 12px rgba(30, 58, 138, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    transition: all 0.3s ease;
+}
+
+[data-theme="light"] .pf-v5-c-button.pf-m-primary:hover,
+[data-theme="light"] button[type="submit"]:not(.pf-m-secondary):hover,
+:root:not([data-theme="dark"]) .pf-v5-c-button.pf-m-primary:hover,
+:root:not([data-theme="dark"]) button[type="submit"]:not(.pf-m-secondary):hover {
+    background: linear-gradient(135deg, var(--royal-blue-800) 0%, var(--royal-blue-700) 100%) !important;
+    box-shadow:
+        0 0 15px rgba(30, 58, 138, 0.3),
+        0 6px 16px rgba(30, 58, 138, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+    transform: translateY(-1px);
+}
+
+/* Input fields */
+[data-theme="dark"] .pf-v5-c-form-control,
+[data-theme="dark"] input,
+[data-theme="dark"] textarea,
+[data-theme="dark"] select {
+    background: rgba(10, 14, 26, 0.6) !important;
+    border: 1px solid rgba(245, 158, 11, 0.2) !important;
+    color: #f8fafc !important;
+    transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .pf-v5-c-form-control:focus,
+[data-theme="dark"] input:focus,
+[data-theme="dark"] textarea:focus,
+[data-theme="dark"] select:focus {
+    border-color: var(--gold-500) !important;
+    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
+    outline: none;
+}
+
+[data-theme="light"] .pf-v5-c-form-control,
+[data-theme="light"] input,
+[data-theme="light"] textarea,
+[data-theme="light"] select,
+:root:not([data-theme="dark"]) .pf-v5-c-form-control,
+:root:not([data-theme="dark"]) input,
+:root:not([data-theme="dark"]) textarea,
+:root:not([data-theme="dark"]) select {
+    background: rgba(255, 255, 255, 0.8) !important;
+    border: 1px solid var(--porcelain-border) !important;
+    color: var(--royal-blue-900) !important;
+    transition: all 0.3s ease;
+}
+
+[data-theme="light"] .pf-v5-c-form-control:focus,
+[data-theme="light"] input:focus,
+[data-theme="light"] textarea:focus,
+[data-theme="light"] select:focus,
+:root:not([data-theme="dark"]) .pf-v5-c-form-control:focus,
+:root:not([data-theme="dark"]) input:focus,
+:root:not([data-theme="dark"]) textarea:focus,
+:root:not([data-theme="dark"]) select:focus {
+    border-color: var(--royal-blue-600) !important;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
+    outline: none;
+}
+
+/* ========================================
+   NAVIGATION & HEADER
+   ======================================== */
+
+[data-theme="dark"] .pf-v5-c-page__header,
+[data-theme="dark"] .pf-v5-c-masthead {
+    background: linear-gradient(90deg, var(--obsidian-base) 0%, var(--obsidian-light) 100%) !important;
+    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 158, 11, 0.05) !important;
+}
+
+[data-theme="light"] .pf-v5-c-page__header,
+[data-theme="light"] .pf-v5-c-masthead,
+:root:not([data-theme="dark"]) .pf-v5-c-page__header,
+:root:not([data-theme="dark"]) .pf-v5-c-masthead {
+    background: var(--porcelain-base) !important;
+    border-bottom: 1px solid var(--porcelain-border) !important;
+    box-shadow: 0 2px 12px var(--porcelain-shadow) !important;
+}
+
+/* Logo area gold accent in dark mode */
+[data-theme="dark"] .pf-v5-c-brand {
+    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3));
+}
+
+/* ========================================
+   SCROLLBARS
+   ======================================== */
+
+[data-theme="dark"] ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-track {
+    background: var(--royal-blue-900);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-600) 100%);
+    border-radius: 6px;
+    border: 2px solid var(--royal-blue-900);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%);
+}
+
+[data-theme="light"] ::-webkit-scrollbar,
+:root:not([data-theme="dark"]) ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-track,
+:root:not([data-theme="dark"]) ::-webkit-scrollbar-track {
+    background: #fef3c7;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-thumb,
+:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, var(--royal-blue-600) 0%, var(--royal-blue-700) 100%);
+    border-radius: 6px;
+    border: 2px solid #fef3c7;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
+:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, var(--royal-blue-700) 0%, var(--royal-blue-800) 100%);
+}
+
+/* ========================================
+   SPECIAL EFFECTS
+   ======================================== */
+
+/* Gold shimmer animation for important elements in dark mode */
+@keyframes gold-shimmer {
+    0% { background-position: -200% center; }
+    100% { background-position: 200% center; }
+}
+
+[data-theme="dark"] .ak-flow-executor .pf-v5-c-title,
+[data-theme="dark"] h1,
+[data-theme="dark"] h2 {
+    background: linear-gradient(
+        90deg,
+        var(--gold-400) 0%,
+        var(--gold-200) 50%,
+        var(--gold-400) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Porcelain shine in light mode */
+[data-theme="light"] h1,
+[data-theme="light"] h2,
+:root:not([data-theme="dark"]) h1,
+:root:not([data-theme="dark"]) h2 {
+    color: var(--royal-blue-900);
+    text-shadow: 0 1px 2px rgba(30, 58, 138, 0.1);
+}
+
+/* Loading spinners */
+[data-theme="dark"] .pf-v5-c-spinner {
+    color: var(--gold-500) !important;
+}
+
+[data-theme="light"] .pf-v5-c-spinner,
+:root:not([data-theme="dark"]) .pf-v5-c-spinner {
+    color: var(--royal-blue-600) !important;
+}
+
+/* Alerts and notifications */
+[data-theme="dark"] .pf-v5-c-alert {
+    border-left: 4px solid var(--gold-500) !important;
+    background: rgba(10, 14, 26, 0.8) !important;
+}
+
+[data-theme="light"] .pf-v5-c-alert,
+:root:not([data-theme="dark"]) .pf-v5-c-alert {
+    border-left: 4px solid var(--royal-blue-600) !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* ========================================
+   COFFEE THEME EASTER EGG
+   ======================================== */
+
+/* Subtle coffee bean pattern overlay (very subtle, only visible on close inspection) */
+.pf-v5-c-login__main::after {
+    content: '';
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8zM6 1v3M10 1v3M14 1v3"/></svg>');
+    opacity: 0.05;
+    pointer-events: none;
+}
+
+[data-theme="dark"] .pf-v5-c-login__main::after {
+    color: var(--gold-500);
+}
+
+[data-theme="light"] .pf-v5-c-login__main::after,
+:root:not([data-theme="dark"]) .pf-v5-c-login__main::after {
+    color: var(--royal-blue-600);
+}
--- a/media/nucleo-icon.svg
+++ b/media/nucleo-icon.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <defs>
+    <linearGradient id="iconGoldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="iconBlueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background circle -->
+  <circle cx="32" cy="32" r="28" fill="url(#iconBlueGradient)"/>
+
+  <!-- Coffee bean shape -->
+  <ellipse cx="32" cy="32" rx="14" ry="20" fill="url(#iconGoldGradient)" transform="rotate(20 32 32)" filter="url(#glow)"/>
+
+  <!-- Coffee bean crease -->
+  <path d="M 32 18 Q 35 32, 32 46" stroke="#1e3a8a" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+
+  <!-- Stylized "N" overlay -->
+  <path d="M 22 20 L 22 44 M 22 20 L 42 44 M 42 20 L 42 44"
+        stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
+
+  <!-- Three dots representing coffee processing stages -->
+  <circle cx="18" cy="52" r="2" fill="url(#iconGoldGradient)" opacity="0.8"/>
+  <circle cx="32" cy="52" r="2" fill="url(#iconGoldGradient)" opacity="0.8"/>
+  <circle cx="46" cy="52" r="2" fill="url(#iconGoldGradient)" opacity="0.8"/>
+</svg>
--- a/media/nucleo-logo.svg
+++ b/media/nucleo-logo.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60" fill="none">
+  <!-- Coffee bean shape integrated with "N" -->
+  <defs>
+    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Coffee bean outline forming an "N" shape -->
+  <path d="M 20 10 Q 15 5, 25 5 L 35 5 Q 45 5, 40 10 L 40 50 Q 45 55, 35 55 L 25 55 Q 15 55, 20 50 Z"
+        fill="url(#blueGradient)" opacity="0.2"/>
+
+  <!-- Stylized "N" with coffee bean accent -->
+  <path d="M 25 15 L 25 45 M 25 15 L 35 45 M 35 15 L 35 45"
+        stroke="url(#blueGradient)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Coffee bean detail on "N" -->
+  <ellipse cx="30" cy="30" rx="6" ry="10" fill="url(#goldGradient)" opacity="0.8" transform="rotate(20 30 30)"/>
+  <path d="M 30 24 Q 32 30, 30 36" stroke="#1e3a8a" stroke-width="1" fill="none"/>
+
+  <!-- "NUCLEO" text -->
+  <text x="55" y="40" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="url(#blueGradient)">
+    NUCLEO
+  </text>
+
+  <!-- "V3" badge -->
+  <rect x="155" y="20" width="40" height="20" rx="10" fill="url(#goldGradient)"/>
+  <text x="175" y="35" font-family="Arial, sans-serif" font-size="12" font-weight="700" fill="#1e3a8a" text-anchor="middle">
+    V3
+  </text>
+
+  <!-- Subtle coffee steam effect -->
+  <path d="M 30 10 Q 28 5, 30 2" stroke="url(#goldGradient)" stroke-width="1.5" fill="none" opacity="0.6" stroke-linecap="round"/>
+  <path d="M 33 8 Q 31 4, 33 1" stroke="url(#goldGradient)" stroke-width="1.5" fill="none" opacity="0.6" stroke-linecap="round"/>
+</svg>