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/Experiments/LlamadorAPI.tsx

@@ -0,0 +1,136 @@
+import { useState, useEffect } from 'react';
+import {
+  TextInput,
+  Textarea,
+  Button,
+  Box,
+  Center,
+  Stack,
+  Badge,
+  Group,
+} from '@mantine/core';
+import { MetodoSelect } from './MetodoSelect';
+import { useMantineTheme } from '@mantine/core';
+
+export function LlamadorAPI() {
+  const [direccion, setDireccion] = useState('http://localhost:8000/api/v1/ping/');
+  const [metodo, setMetodo] = useState('GET');
+  const [contenido, setContenido] = useState('');
+  const [respuesta, setRespuesta] = useState('');
+  const [codigoRespuesta, setCodigoRespuesta] = useState<number | null>(null);
+
+  const colorCodigo = (status: number): string => {
+    if (status >= 200 && status < 300) return 'green';
+    if (status >= 300 && status < 400) return 'yellow';
+    if (status >= 400 && status < 500) return 'orange';
+    return 'red';
+  };
+
+  const theme = useMantineTheme();
+  
+
+  const llamarAPI = async () => {
+    try {
+      const options: RequestInit = {
+        method: metodo,
+        mode: 'cors',
+        headers: {},
+      };
+
+      if (metodo !== 'GET') {
+        options.headers = {
+          'Content-Type': 'application/json',
+        };
+        try {
+          JSON.parse(contenido);
+          options.body = contenido;
+        } catch (err) {
+          setRespuesta('Error: El contenido no es un JSON válido');
+          setCodigoRespuesta(null);
+          return;
+        }
+      }
+
+      const res = await fetch(direccion, options);
+      setCodigoRespuesta(res.status);
+
+      const contentType = res.headers.get('content-type');
+
+      if (contentType?.includes('application/json')) {
+        const data = await res.json();
+        const formatted = JSON.stringify(data, null, 2);
+        setRespuesta(formatted);
+      } else {
+        const text = await res.text();
+        setRespuesta(text);
+      }
+    } catch (error: any) {
+      console.error('Error en la API:', error);
+      setRespuesta(`Error: ${error.message || error}`);
+      setCodigoRespuesta(null);
+    }
+  };
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        llamarAPI();
+      }
+    };
+
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [metodo, direccion, contenido]);
+
+  return (
+    <Box style={{ flex: 1, padding: 40 }}>
+      <Center style={{ height: '100%' }}>
+        <Stack style={{ width: 600 }}>
+          <TextInput
+            label="Dirección"
+            placeholder="http://localhost:8000/api/..."
+            value={direccion}
+            onChange={(e) => setDireccion(e.currentTarget.value)}
+          />
+
+          <MetodoSelect metodo={metodo} setMetodo={setMetodo} />
+
+          <Textarea
+            label="Contenido (JSON)"
+            placeholder='{"contenido": "Hola"}'
+            value={contenido}
+            onChange={(e) => setContenido(e.currentTarget.value)}
+            autosize
+            minRows={3}
+          />
+
+          <Button onClick={llamarAPI} 
+          variant="gradient"
+          gradient={{
+                  from: theme.colors.brand[7],
+                  to: theme.colors.brand[4],
+                }}>
+            Enviar solicitud
+          </Button>
+
+          {codigoRespuesta !== null && (
+            <Group>
+              <Badge color={colorCodigo(codigoRespuesta)} size="lg">
+                Código: {codigoRespuesta}
+              </Badge>
+            </Group>
+          )}
+
+          <Textarea
+            label="Respuesta de la API"
+            value={respuesta}
+            readOnly
+            autosize
+            minRows={6}
+          />
+        </Stack>
+      </Center>
+    </Box>
+  );
+}