Add login functionality, authentication handling, and logout support

Replaced React 19 with React 18 due to compatibility issues. Introduced conditional rendering for login and app components based on authentication state. Added basic login form and error handling. Updated styles for authentication UI and enhanced header with logout functionality.

src/components/Auth/Login.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import '../../styles/components.css';
+
+const Login = ({ onLogin }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setError('');
+
+    // Validación muy básica
+    if (!email || !password) {
+      setError('Por favor, ingresa tu correo y contraseña.');
+      return;
+    }
+
+    // Aquí iría la llamada real a API. Por ahora, simulamos éxito.
+    try {
+      localStorage.setItem('auth', 'true');
+      onLogin?.();
+    } catch (err) {
+      setError('Ocurrió un error al iniciar sesión.');
+    }
+  };
+
+  return (
+    <div className="auth-wrapper">
+      <div className="card auth-card">
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-lock"></i>
+            Iniciar Sesión
+          </h3>
+        </div>
+        <form onSubmit={handleSubmit} className="login-form" noValidate>
+          <div className="form-group">
+            <label htmlFor="email">Correo</label>
+            <input
+              id="email"
+              type="email"
+              placeholder="tu@correo.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoFocus
+              aria-invalid={!!error && (!email || !password)}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Contraseña</label>
+            <input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              aria-invalid={!!error && (!email || !password)}
+            />
+          </div>
+
+          {error && <div className="alert alert-error" role="alert">{error}</div>}
+
+          <button type="submit" className="btn btn-primary btn-block">Entrar</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/components/Layout/Header.js

@@ -2,6 +2,14 @@ import React from 'react';
 import '../../styles/components.css';
 
 const Header = () => {
+  const handleLogout = () => {
+    try {
+      localStorage.setItem('auth', 'false');
+    } catch (e) {}
+    // Aseguramos volver al login
+    window.location.reload();
+  };
+
   return (
     <div className="header">
       <div className="page-title">
@@ -16,6 +24,9 @@ const Header = () => {
         <button className="btn btn-primary">
           <i className="fas fa-plus"></i> Nueva Solicitud
         </button>
+        <button className="btn btn-outline" onClick={handleLogout} title="Cerrar sesión">
+          <i className="fas fa-sign-out-alt"></i> Salir
+        </button>
       </div>
     </div>
   );