diff --git a/.gitignore b/.gitignore
index a632bbe..37a6963 100644
--- 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/
diff --git a/CUSTOMIZATION.md b/CUSTOMIZATION.md
new file mode 100644
index 0000000..e76f588
--- /dev/null
+++ 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*
diff --git a/media/favicon.svg b/media/favicon.svg
new file mode 100644
index 0000000..b6d8a6e
--- /dev/null
+++ b/media/favicon.svg
@@ -0,0 +1,25 @@
+
diff --git a/media/nucleo-custom.css b/media/nucleo-custom.css
new file mode 100644
index 0000000..b3248f4
--- /dev/null
+++ 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,');
+ 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);
+}
diff --git a/media/nucleo-icon.svg b/media/nucleo-icon.svg
new file mode 100644
index 0000000..c7323b0
--- /dev/null
+++ b/media/nucleo-icon.svg
@@ -0,0 +1,37 @@
+
diff --git a/media/nucleo-logo.svg b/media/nucleo-logo.svg
new file mode 100644
index 0000000..7a9961c
--- /dev/null
+++ b/media/nucleo-logo.svg
@@ -0,0 +1,40 @@
+