siesa-agents 2.1.19 → 2.1.21

package/bmad-core/data/technical-preferences-ux.md

@@ -1 +1,423 @@
-#  Contenido del MarkDown con informacion y referecias actualizadas
+# Technical Preferences - UX Configuration
+
+## Project Setup Configuration
+Based on Frontend Development Standards and Clean Architecture Implementation
+
+### Technology Stack
+- **Framework**: Next.js 14+ with App Router
+- **Language**: TypeScript (strict mode)
+- **Styling**: TailwindCSS + Shadcn/ui + Radix UI
+- **State Management**: Zustand
+- **Testing**: Vitest + React Testing Library
+- **Architecture**: Clean Architecture with DDD patterns
+- **Loading States**: React Loading Skeleton (for placeholders/preloading)
+
+### Resources
+Project assets are centralized in the [resources/](../../../resources/) directory at the root level:
+
+```
+resources/
+├── fonts/          # SiesaBT font family files
+└── images/         # Brand assets, logos, and graphics
+```
+
+**Usage**:
+- Reference fonts from `@/resources/fonts/`
+- Reference images from `@/resources/images/`
+- Logo assets available in `resources/images/logos/`
+
+---
+
+
+## Design System Foundation
+
+### Color Palette
+
+#### Primary Colors (Brand)
+```css
+:root {
+  /* Primary Color: #0E79FD */
+  --color-primary-50: #eff8ff;
+  --color-primary-100: #dbf0ff;
+  --color-primary-200: #bfe3ff;
+  --color-primary-300: #93d2ff;
+  --color-primary-400: #60b6ff;
+  --color-primary-500: #0E79FD; /* Main Primary Color */
+  --color-primary-600: #0b6ae6;
+  --color-primary-700: #0959c2;
+  --color-primary-800: #0e4a9e;
+  --color-primary-900: #123f80;
+  --color-primary-950: #11274d;
+}
+```
+
+#### Secondary Colors (Brand)
+```css
+:root {
+  /* Secondary Color: #000000 (Black) - Brand Secondary, NOT for grays/backgrounds */
+  --color-secondary-50: #f8f8f8;
+  --color-secondary-100: #f0f0f0;
+  --color-secondary-200: #e4e4e4;
+  --color-secondary-300: #d1d1d1;
+  --color-secondary-400: #b4b4b4;
+  --color-secondary-500: #9a9a9a;
+  --color-secondary-600: #818181;
+  --color-secondary-700: #6a6a6a;
+  --color-secondary-800: #5a5a5a;
+  --color-secondary-900: #4e4e4e;
+  --color-secondary-950: #000000; /* Main Secondary Color */
+}
+```
+
+#### Tertiary Colors (Brand)
+```css
+:root {
+  /* Tertiary Color: #154ca9 */
+  --color-tertiary-50: #eff6ff;
+  --color-tertiary-100: #dbeafe;
+  --color-tertiary-200: #bfdbfe;
+  --color-tertiary-300: #93c5fd;
+  --color-tertiary-400: #60a5fa;
+  --color-tertiary-500: #3b82f6;
+  --color-tertiary-600: #2563eb;
+  --color-tertiary-700: #154ca9; /* Main Tertiary Color */
+  --color-tertiary-800: #1e3a8a;
+  --color-tertiary-900: #1e3a8a;
+  --color-tertiary-950: #172554;
+}
+```
+
+#### Semantic Colors & Usage Guidelines
+```css
+:root {
+  /* Use Tailwind default semantic colors */
+  /* Success: theme('colors.green.500') | Warning: theme('colors.amber.500') */
+  /* Error: theme('colors.red.500') | Info: theme('colors.cyan.500') */
+  /* Neutrals: theme('colors.slate.*') - NOT secondary brand colors */
+}
+```
+
+```yaml
+color_rules:
+  tailwind_first: "Use theme() for system colors"
+  brand_only: "Hex codes for brand colors (#0E79FD, #154ca9, #000000)"
+  css: "theme() in custom properties"
+  classes: "Direct utility classes (bg-slate-200)"
+```
+
+#### Background & Surface Colors
+```css
+:root {
+  /* Light Theme - Using Tailwind variables */
+  --color-background: theme('colors.white');                    /* white */
+  --color-surface: theme('colors.slate.50');                    /* slate-50 */
+  --color-surface-secondary: theme('colors.slate.100');         /* slate-100 */
+  --color-border: theme('colors.slate.200');                    /* slate-200 */
+  --color-border-secondary: theme('colors.slate.300');          /* slate-300 */
+  
+  /* Dark Theme Support - Using Tailwind variables */
+  --color-background-dark: theme('colors.slate.950');           /* slate-950 */
+  --color-surface-dark: theme('colors.slate.900');              /* slate-900 */
+  --color-surface-secondary-dark: theme('colors.slate.800');    /* slate-800 */
+  --color-border-dark: theme('colors.slate.700');               /* slate-700 */
+  --color-border-secondary-dark: theme('colors.slate.600');     /* slate-600 */
+  
+  /* Note: Secondary brand color (#000000) is for brand elements, not backgrounds */
+}
+```
+
+### Dark Mode Implementation
+
+#### Configuration
+```yaml
+dark_mode:
+  method: "class"                    # Tailwind class-based
+  selector: "html"                   # Root element
+  framework: "next-themes"           # SSR-safe theme switching
+  default: "system"                  # Follow system preference
+```
+
+#### Brand Colors Dark Mode Adaptation
+```css
+.dark {
+  /* Primary - Enhanced contrast for dark backgrounds */
+  --color-primary-400: #60b6ff;
+  --color-primary-500: #3b9eff;
+  --color-primary-600: #0E79FD;
+  
+  /* Secondary alternatives for dark mode visibility */
+  --color-secondary-alt-50: theme('colors.slate.50');
+  --color-secondary-alt-100: theme('colors.slate.200');
+  --color-secondary-alt-200: theme('colors.slate.300');
+  
+  /* Tertiary - Optimized for dark mode */
+  --color-tertiary-400: #60a5fa;
+  --color-tertiary-500: #3b82f6;
+  --color-tertiary-600: #154ca9;
+}
+```
+
+#### Tailwind Classes for Dark Mode
+```yaml
+text_colors:
+  primary: "text-gray-900 dark:text-gray-50"
+  secondary: "text-gray-700 dark:text-gray-300"
+  muted: "text-gray-500 dark:text-gray-400"
+  disabled: "text-gray-400 dark:text-gray-600"
+  
+brand_colors:
+  primary: "text-primary-600 dark:text-primary-400"
+  secondary: "text-secondary-950 dark:text-slate-50"
+  tertiary: "text-tertiary-700 dark:text-tertiary-400"
+
+surfaces:
+  page: "bg-white dark:bg-slate-950"
+  card: "bg-slate-50 dark:bg-slate-900"
+  elevated: "bg-white dark:bg-slate-800"
+  input: "bg-white dark:bg-slate-900"
+  
+borders:
+  subtle: "border-slate-200 dark:border-slate-700"
+  prominent: "border-slate-300 dark:border-slate-600"
+  focus: "ring-primary-500 dark:ring-primary-400"
+
+buttons:
+  primary: "bg-primary-500 text-white hover:bg-primary-600 dark:bg-primary-600 dark:hover:bg-primary-500"
+  secondary: "bg-slate-200 text-slate-900 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600"
+  ghost: "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+
+navigation:
+  navbar: "bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700"
+  sidebar: "bg-slate-50 border-slate-200 dark:bg-slate-900 dark:border-slate-700"
+  active: "bg-primary-50 text-primary-700 border-primary-200 dark:bg-primary-950 dark:text-primary-300 dark:border-primary-800"
+
+feedback:
+  success: "bg-green-50 text-green-800 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800"
+  warning: "bg-amber-50 text-amber-800 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800"
+  error: "bg-red-50 text-red-800 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800"
+```
+
+#### Tailwind Configuration
+```javascript
+// tailwind.config.js
+module.exports = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff8ff',
+          100: '#dbf0ff',
+          200: '#bfe3ff',
+          300: '#93d2ff',
+          400: '#60b6ff',  // Enhanced for dark mode
+          500: '#0E79FD',  // Main brand color
+          600: '#0b6ae6',
+          700: '#0959c2',
+          800: '#0e4a9e',
+          900: '#123f80',
+          950: '#11274d',
+        },
+        secondary: {
+          // Custom neutral scale for brand secondary
+          50: '#f8f8f8',
+          100: '#f0f0f0',
+          200: '#e4e4e4',
+          300: '#d1d1d1',
+          400: '#b4b4b4',
+          500: '#9a9a9a',
+          600: '#818181',
+          700: '#6a6a6a',
+          800: '#5a5a5a',
+          900: '#4e4e4e',
+          950: '#000000',  // Main secondary color
+        },
+        tertiary: {
+          // Keep original tertiary color scale as defined
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#154ca9',  // Main tertiary color (custom)
+          800: '#1e3a8a',
+          900: '#1e3a8a',
+          950: '#172554',
+        }
+      }
+    }
+  }
+}
+```
+
+### Typography System
+
+#### Font Configuration
+```css
+:root {
+  /* Siesa Brand Fonts - 3 weights available */
+  --font-primary: 'SiesaBT-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-light: 'SiesaBT-Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-bold: 'SiesaBT-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  
+  /* Tailwind font weight mapping */
+  --font-weight-light: 300;    /* SiesaBT-Light */
+  --font-weight-normal: 400;   /* SiesaBT-Regular */
+  --font-weight-medium: 400;   /* SiesaBT-Regular */
+  --font-weight-semibold: 700; /* SiesaBT-Bold */
+  --font-weight-bold: 700;     /* SiesaBT-Bold */
+  --font-weight-extrabold: 700; /* SiesaBT-Bold */
+  --font-weight-black: 700;    /* SiesaBT-Bold */
+}
+```
+
+#### Typography Scale
+```yaml
+typography:
+  headings:
+    h1: "text-4xl font-bold leading-tight"
+    h2: "text-3xl font-bold leading-tight"
+    h3: "text-2xl font-semibold leading-snug"
+    h4: "text-xl font-semibold leading-snug"
+    h5: "text-lg font-medium leading-normal"
+    h6: "text-base font-medium leading-normal"
+
+  body:
+    paragraph: "text-base font-normal leading-relaxed"
+    large: "text-lg font-normal leading-relaxed"
+    small: "text-sm font-normal leading-normal"
+    caption: "text-xs font-light leading-normal"
+
+  interactive:
+    label: "text-sm font-medium leading-normal"
+    button_primary: "text-base font-semibold leading-none"
+    button_secondary: "text-sm font-medium leading-none"
+    link: "text-base font-normal leading-normal"
+    link_emphasis: "text-base font-semibold leading-normal"
+
+  utility:
+    code: "text-sm font-normal leading-normal font-mono"
+    badge: "text-xs font-semibold leading-none"
+    tooltip: "text-sm font-normal leading-snug"
+```
+
+### Assets & Systems Configuration
+
+#### Logo Assets
+```yaml
+logos:
+  paths:
+    assets: "assets/images/logos/"
+    public: "/images/logos/"
+  
+  variants:
+    full_blue: "Siesa_Logosimbolo_Azul.svg"
+    full_white: "Siesa_Logosimbolo_Blanco.svg"
+    symbol_blue: "Siesa_Simbolo_Azul.svg"
+    symbol_white: "Siesa_Simbolo_Blanco.svg"
+  
+  usage:
+    header: "symbol_blue"
+    footer: "full_blue"
+    dark_theme: "full_white"
+    favicon: "symbol_blue"
+  
+  specs:
+    min_size_full: "120px"
+    min_size_symbol: "24px"
+    format: "SVG"
+```
+
+#### Icons
+```yaml
+icons:
+  primary: "Heroicons"
+  secondary: "Font Awesome 6.5+"
+  
+  sizes:
+    small: "w-4 h-4"
+    default: "w-5 h-5"
+    medium: "w-6 h-6"
+    large: "w-8 h-8"
+    
+  colors:
+    inherit: "text-current"
+    primary: "text-primary-500"
+    secondary: "text-secondary-600"
+    neutral: "text-gray-500"
+```
+
+#### Loading States
+```yaml
+skeleton:
+  library: "react-loading-skeleton ^3.4.0"
+  theming:
+    light: "base: theme('colors.slate.200'), highlight: theme('colors.slate.100')"
+    dark: "base: theme('colors.slate.700'), highlight: theme('colors.slate.600')"
+    radius: "rounded-md"
+    duration: "1.5s"
+```
+
+---
+
+## Standards & Guidelines
+
+### Accessibility
+```yaml
+accessibility:
+  color_contrast: "4.5:1 minimum (WCAG 2.1 AA)"
+  large_text_contrast: "3.1:1 minimum"
+  focus_indicators: "2px solid var(--color-primary-500)"
+  touch_targets: "44px minimum"
+  font_size_minimum: "16px"
+  line_length_maximum: "75ch"
+  
+requirements:
+  landmarks: true
+  headings: true
+  labels: true
+  alt_text: true
+  skip_links: true
+```
+
+### Performance Targets
+```yaml
+bundle_limits:
+  initial: "< 500KB gzipped"
+  routes: "< 200KB gzipped"
+  components: "< 100KB gzipped"
+
+metrics:
+  fcp: "< 1.5s"
+  lcp: "< 2.5s"
+  cls: "< 0.1"
+  tti: "< 3s"
+```
+
+### Architecture
+```yaml
+components:
+  base: "Shadcn/ui from MCP registry"
+  composite: "Feature-specific compositions"
+  layout: "Page and section layouts"
+  utility: "Helpers and wrappers"
+
+state_management:
+  global: "Authentication, theme, app settings"
+  feature: "Domain-specific data and UI state"
+  local: "Component-specific temporary state"
+  server: "API data with caching"
+
+naming:
+  components: "PascalCase"
+  files: "kebab-case"
+  directories: "kebab-case"
+  assets: "kebab-case"
+```
+
+---
+
+## This configuration serves as the foundation for all UX decisions and component implementation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siesa-agents",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "description": "Paquete para instalar y configurar agentes SIESA en tu proyecto",
   "main": "index.js",
   "bin": {
@@ -25,6 +25,7 @@
     "github/**/*",
     "claude/**/*",
     "bin/**/*",
+    "resources/**/*",
     "README.md"
   ],
   "engines": {

package/resources/images/Siesa_Logosimbolo_Azul.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Siesa_Logosimbolos" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1999.86 500">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #0e79fd;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="st0" d="M812.95,404.07c-165.79,0-171.25-110.18-171.25-115.7h52.63s-.61,74.35,119.46,74.35h1.25c64.32,0,104-20.88,104-55.55v-1.67c0-27.57-23.81-38.43-95.65-47.2l-49.7-6.27c-76.85-9.61-123.63-33.41-123.63-90.64v-2.09c0-64.74,59.73-98.57,151.62-98.57h.84c161.01,0,161.4,108.26,161.4,108.26h-51.68s1.14-66.9-110.55-66.9h-.84c-61.82,0-98.16,20.47-98.16,55.13v1.67c0,27.15,22.14,43.44,91.89,52.21l47.2,5.85c89.8,10.86,130.74,37.17,130.74,87.71v2.09c0,64.74-64.74,97.32-158.72,97.32h-.85Z"/>
+    <path class="st0" d="M1560.56,404.07c-142.87,0-142.85-87.71-142.85-87.71h49.07c0,4.14,13.22,50.96,97.96,50.96h.84c53.88,0,80.61-12.11,80.61-36.76v-1.25c0-22.56-23.39-30.07-69.34-34.67l-55.13-5.01c-59.31-5.43-100.24-22.55-100.24-67.66v-1.67c0-47.62,48.87-74.77,131.15-74.77h.84c126.87,0,134.91,71.8,134.91,86.46h-50.12s2.54-49.7-84.79-49.7h-.84c-49.29,0-81.03,14.2-81.03,39.26v.84c0,22.97,27.57,30.91,73.93,35.5l57.22,5.43c65.16,6.68,93.98,26.73,93.98,64.74v2.09c0,48.87-45.95,73.93-135.33,73.93h-.84Z"/>
+    <g>
+      <rect class="st0" x="1014.63" y="168.99" width="47.02" height="230.9"/>
+      <rect class="st0" x="1012.55" y="65.58" width="51.18" height="51.18"/>
+    </g>
+    <path class="st0" d="M1984.7,190.65c-10.2-15.12-25.5-26.43-45.89-33.91-20.4-7.47-46.41-11.22-78.02-11.22-94.51,0-129.22,41.19-133.11,86.46h50.32c1.68-35.05,41.78-49.7,81.77-49.7,31.62,0,54.73,3.6,69.35,13.11,14.61,9.52,21.93,23.8,21.93,42.84v15.07c-108.47-.19-227.95-1.17-227.95,79.57,0,69.38,81.08,71.4,99.44,71.4,80.19,0,127.96-48.44,127.96-48.44l.04,43.8h49.47v-155.17c0-20.73-5.1-38.67-15.3-53.8h-.01ZM1935.49,326.23c-10.37,12.24-24.57,21.85-42.58,28.81-18.02,6.97-37.91,10.45-59.66,10.45-13.26,0-59.16-5.05-59.16-33.66,0-21.16,11.93-42.1,176.9-43.02-.54,13.38-5.71,25.85-15.5,37.41h0Z"/>
+    <path class="st0" d="M1390.14,272.08c-2.09-79.78-53.88-126.56-141.18-126.56h-.84c-90.22,0-144.52,47.2-144.52,126.14v2.09c0,81.45,55.97,130.32,149.53,130.32h.84c64.52,0,117.2-37.61,130.2-87.71l-48.33-.11c-8.77,26.73-35.5,48.15-81.87,48.15h-.84c-60.15,0-95.23-25.48-100.24-75.6h236.61c.71-4.3.63-16.71.63-16.71h0ZM1247.29,182.28h.84c53.21,0,85.14,26.08,91.91,72.32h-186.73c6.81-46.24,39.97-72.32,93.99-72.32h-.01Z"/>
+  </g>
+  <polygon class="st0" points="0 300 0 0 300 0 0 300"/>
+  <polygon class="st0" points="0 500 0 300 200 300 0 500"/>
+  <polygon class="st0" points="500 0 500 300 200 300 500 0"/>
+  <polygon class="st0" points="500 300 500 500 300 500 500 300"/>
+</svg>

package/resources/images/Siesa_Logosimbolo_Blanco.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Siesa_Logosimbolos" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2000.01 500">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="st0" d="M813.02,404.07c-165.79,0-171.25-110.18-171.25-115.7h52.63s-.61,74.35,119.46,74.35h1.25c64.32,0,104-20.88,104-55.55v-1.67c0-27.57-23.81-38.43-95.65-47.2l-49.7-6.27c-76.85-9.61-123.63-33.41-123.63-90.64v-2.09c0-64.74,59.73-98.57,151.62-98.57h.84c161.01,0,161.4,108.26,161.4,108.26h-51.68s1.14-66.9-110.55-66.9h-.84c-61.82,0-98.16,20.47-98.16,55.13v1.67c0,27.15,22.14,43.44,91.89,52.21l47.2,5.85c89.8,10.86,130.74,37.17,130.74,87.71v2.09c0,64.74-64.74,97.32-158.72,97.32h-.85Z"/>
+    <path class="st0" d="M1560.63,404.07c-142.87,0-142.85-87.71-142.85-87.71h49.07c0,4.14,13.22,50.96,97.96,50.96h.84c53.88,0,80.61-12.11,80.61-36.76v-1.25c0-22.56-23.39-30.07-69.34-34.67l-55.13-5.01c-59.31-5.43-100.24-22.55-100.24-67.66v-1.67c0-47.62,48.87-74.77,131.15-74.77h.84c126.87,0,134.91,71.8,134.91,86.46h-50.12s2.54-49.7-84.79-49.7h-.84c-49.29,0-81.03,14.2-81.03,39.26v.84c0,22.97,27.57,30.91,73.93,35.5l57.22,5.43c65.16,6.68,93.98,26.73,93.98,64.74v2.09c0,48.87-45.95,73.93-135.33,73.93h-.84Z"/>
+    <g>
+      <rect class="st0" x="1014.7" y="168.99" width="47.02" height="230.9"/>
+      <rect class="st0" x="1012.62" y="65.58" width="51.18" height="51.18"/>
+    </g>
+    <path class="st0" d="M1984.77,190.65c-10.2-15.12-25.5-26.43-45.89-33.91-20.4-7.47-46.41-11.22-78.02-11.22-94.51,0-129.22,41.19-133.11,86.46h50.32c1.68-35.05,41.78-49.7,81.77-49.7,31.62,0,54.73,3.6,69.35,13.11,14.61,9.52,21.93,23.8,21.93,42.84v15.07c-108.47-.19-227.95-1.17-227.95,79.57,0,69.38,81.08,71.4,99.44,71.4,80.19,0,127.96-48.44,127.96-48.44l.04,43.8h49.47v-155.17c0-20.73-5.1-38.67-15.3-53.8h-.01ZM1935.56,326.23c-10.37,12.24-24.57,21.85-42.58,28.81-18.02,6.97-37.91,10.45-59.66,10.45-13.26,0-59.16-5.05-59.16-33.66,0-21.16,11.93-42.1,176.9-43.02-.54,13.38-5.71,25.85-15.5,37.41h0Z"/>
+    <path class="st0" d="M1390.21,272.08c-2.09-79.78-53.88-126.56-141.18-126.56h-.84c-90.22,0-144.52,47.2-144.52,126.14v2.09c0,81.45,55.97,130.32,149.53,130.32h.84c64.52,0,117.2-37.61,130.2-87.71l-48.33-.11c-8.77,26.73-35.5,48.15-81.87,48.15h-.84c-60.15,0-95.23-25.48-100.24-75.6h236.61c.71-4.3.63-16.71.63-16.71h0ZM1247.36,182.28h.84c53.21,0,85.14,26.08,91.91,72.32h-186.73c6.81-46.24,39.97-72.32,93.99-72.32h-.01Z"/>
+  </g>
+  <polygon class="st0" points=".07 300 .07 0 300.07 0 .07 300"/>
+  <polygon class="st0" points=".07 500 .07 300 200.07 300 .07 500"/>
+  <polygon class="st0" points="500.07 0 500.07 300 200.07 300 500.07 0"/>
+  <polygon class="st0" points="500.07 300 500.07 500 300.07 500 500.07 300"/>
+</svg>

package/resources/images/Siesa_Simbolo_Azul.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Siesa_Logosimbolos" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #0e79fd;
+      }
+    </style>
+  </defs>
+  <polygon class="st0" points=".05 300 .05 0 300.05 0 .05 300"/>
+  <polygon class="st0" points=".05 500 .05 300 200.05 300 .05 500"/>
+  <polygon class="st0" points="500.05 0 500.05 300 200.05 300 500.05 0"/>
+  <polygon class="st0" points="500.05 300 500.05 500 300.05 500 500.05 300"/>
+</svg>

package/resources/images/Siesa_Simbolo_Blanco.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Siesa_Logosimbolos" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
+  <!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <polygon class="st0" points=".05 300 .05 0 300.05 0 .05 300"/>
+  <polygon class="st0" points=".05 500 .05 300 200.05 300 .05 500"/>
+  <polygon class="st0" points="500.05 0 500.05 300 200.05 300 500.05 0"/>
+  <polygon class="st0" points="500.05 300 500.05 500 300.05 500 500.05 300"/>
+</svg>