feat: Implement main application shell with navigation and color scheme toggle

- Added Appshell component with responsive navbar and main content area
- Integrated ColorSchemeToggle for light/dark mode switching
- Created Welcome component with styled title and introductory text
- Developed ChatPage for LLM interaction with WebSocket support
- Implemented Biblioteca for managing notes with rich text editor
- Added LoginPage for user authentication with error handling
- Introduced MessageList and MessageBubble components for chat messages
- Styled components with CSS modules for consistent design

frontend/src/frontend_domains/FitzStudio/Appshell/Appshell.module.css

@@ -0,0 +1,103 @@
+.navbar {
+  height: 100vh; /* ← Ocupa todo el alto de la ventana */
+  display: flex;
+  flex-direction: column;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  width: 300px;
+  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
+  top: 0; /* ← Ancla arriba */
+}
+  
+
+.title {
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
+  margin-bottom: var(--mantine-spacing-sm);
+  background-color: var(--mantine-color-body);
+  padding: var(--mantine-spacing-xs);
+  padding-top: 15px;
+  height: 50px;
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+}
+  
+
+
+  .wrapper {
+    display: flex;
+    flex: 1;
+  }
+  
+  /* Esta es la barra izquierda pequeña donde los iconos */
+  .aside {
+    flex: 0 0 52px;
+    background-color: var(--mantine-color-body);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+  }
+  
+  .main {
+    flex: 1;
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+  
+  .topSection {
+    padding-top: 12px; /* o la cantidad que desees */
+  }
+
+  /* Estos son los iconos */
+  .mainLink {
+    
+    width: 40px;
+    height: 40px;
+    margin-bottom: 4px;
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  
+    &:hover {
+      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+    }
+  
+    &[data-active] {
+      &,
+      &:hover {
+        background-color: var(--mantine-color-brand-7);
+        color: var(--mantine-color-brand-2);
+      }
+    }
+  }
+  
+
+  
+  .link {
+    display: block;
+    text-decoration: none;
+    border-top-right-radius: var(--mantine-radius-md);
+    border-bottom-right-radius: var(--mantine-radius-md);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    padding: 0 var(--mantine-spacing-md);
+    font-size: var(--mantine-font-size-sm);
+    margin-right: var(--mantine-spacing-md);
+    font-weight: 420;
+    height: 30px;
+    line-height: 30px;
+  
+    &:hover {
+      background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+      color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
+    }
+  
+    &[data-active] {
+      &,
+      &:hover {
+        background-color: var(--mantine-color-brand-7);
+        color: var(--mantine-color-brand-2);
+      }
+    }
+  }