feat: initial commit — HermesMessages SaaS platform

Backend (FastAPI + Python 3.12):
- Multi-tenant auth with JWT: login, register, refresh, Meta OAuth
- Business & BusinessConfig management
- WhatsApp webhook with HMAC signature verification
- Bot engine powered by Claude AI
- Calendar availability with Redis caching
- Reservations CRUD with status management
- Dashboard analytics (stats, agenda, peak hours)
- Billing & plan management
- Admin panel with platform-wide stats
- Async bcrypt via asyncio.to_thread
- IntegrityError handling for concurrent registration race conditions

Frontend (React 18 + Vite + Tailwind CSS):
- Multi-step guided registration form with helper text on every field
- Login page with show/hide password toggle
- Protected routes with AuthContext
- Dashboard with stats cards, bar chart, and daily agenda
- Reservations list with search, filters, and inline status actions
- Calendar with weekly view, slot availability, and date blocking
- Config page: business info, schedules, bot personality
- Billing page with plan comparison and usage bar

Design system:
- Bricolage Grotesque + DM Sans typography
- Emerald primary palette with semantic color tokens
- scale(0.97) button press feedback, ease-out animations
- Skeleton loaders, stagger animations, prefers-reduced-motion support
- Accessible: aria-labels, visible focus rings, 4.5:1 contrast

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/layout/Layout.jsx

@@ -0,0 +1,29 @@
+import { Outlet, useLocation } from 'react-router-dom'
+import Sidebar from './Sidebar'
+
+const PAGE_TITLES = {
+  '/dashboard': 'Dashboard',
+  '/reservations': 'Reservas',
+  '/calendar': 'Disponibilidad',
+  '/config': 'Configuración',
+  '/billing': 'Plan y Facturación',
+}
+
+export default function Layout() {
+  const { pathname } = useLocation()
+  const title = PAGE_TITLES[pathname] ?? 'HermesMessages'
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <div className="flex-1 flex flex-col min-w-0">
+        <header className="sticky top-0 z-10 bg-bg/80 backdrop-blur border-b border-border px-8 py-4">
+          <h1 className="font-display text-xl font-semibold text-slate-900">{title}</h1>
+        </header>
+        <main className="flex-1 px-8 py-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

frontend/src/components/layout/Sidebar.jsx

@@ -0,0 +1,97 @@
+import { NavLink, useNavigate } from 'react-router-dom'
+import {
+  LayoutDashboard, CalendarDays, BookOpen, Settings, CreditCard,
+  MessageCircle, LogOut, ChevronRight,
+} from 'lucide-react'
+import { useAuth } from '@/contexts/AuthContext'
+import { cn } from '@/lib/utils'
+
+const NAV_ITEMS = [
+  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/reservations', icon: BookOpen, label: 'Reservas' },
+  { to: '/calendar', icon: CalendarDays, label: 'Disponibilidad' },
+  { to: '/config', icon: Settings, label: 'Configuración' },
+  { to: '/billing', icon: CreditCard, label: 'Plan y Facturación' },
+]
+
+export default function Sidebar() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+
+  async function handleLogout() {
+    await logout()
+    navigate('/login')
+  }
+
+  return (
+    <aside className="flex flex-col w-60 min-h-screen bg-white border-r border-border flex-shrink-0">
+      {/* Logo */}
+      <div className="flex items-center gap-2.5 px-5 py-5 border-b border-border">
+        <div className="w-8 h-8 rounded-lg bg-primary-600 flex items-center justify-center flex-shrink-0">
+          <MessageCircle className="w-4.5 h-4.5 text-white" size={18} />
+        </div>
+        <span className="font-display font-semibold text-slate-900 text-base leading-tight">
+          Hermes<span className="text-primary-600">Messages</span>
+        </span>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 px-3 py-4 flex flex-col gap-0.5">
+        {NAV_ITEMS.map(({ to, icon: Icon, label }, i) => (
+          <NavLink
+            key={to}
+            to={to}
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+                isActive
+                  ? 'bg-primary-50 text-primary-700'
+                  : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
+              )
+            }
+            style={{ animationDelay: `${i * 40}ms` }}
+          >
+            {({ isActive }) => (
+              <>
+                <Icon
+                  size={17}
+                  className={cn(
+                    'flex-shrink-0 transition-colors duration-150',
+                    isActive ? 'text-primary-600' : 'text-slate-400',
+                  )}
+                />
+                <span className="flex-1">{label}</span>
+                {isActive && (
+                  <ChevronRight size={14} className="text-primary-400 flex-shrink-0" />
+                )}
+              </>
+            )}
+          </NavLink>
+        ))}
+      </nav>
+
+      {/* Footer usuario */}
+      <div className="border-t border-border px-3 py-3">
+        <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg">
+          <div className="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0">
+            <span className="text-xs font-semibold text-primary-700">
+              {user?.email?.[0]?.toUpperCase() ?? 'U'}
+            </span>
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-medium text-slate-900 truncate">{user?.email}</p>
+            <p className="text-xs text-slate-400">Propietario</p>
+          </div>
+        </div>
+        <button
+          onClick={handleLogout}
+          className="btn-ghost w-full justify-start mt-1 text-slate-500 hover:text-danger-600 hover:bg-danger-50"
+        >
+          <LogOut size={15} />
+          Cerrar sesión
+        </button>
+      </div>
+    </aside>
+  )
+}