agregando archivos de customization

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>

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);
+}

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>

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>