<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portal de Clientes · U-site</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f8fafc; }
    [x-cloak] { display: none !important; }
    :root { --brand: #8eb02f; --brand-dark: #6d8c24; }
  </style>
</head>
<body class="min-h-screen flex flex-col">

  <!-- Navbar -->
  <header class="bg-white border-b border-slate-200 sticky top-0 z-30">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
      <!-- Logo -->
      <a href="/portal/dashboard" class="flex items-center gap-2 font-bold text-slate-800 text-lg">
        <span class="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-bold" style="background:#8eb02f">U</span>
        <span>Portal de Clientes</span>
      </a>
      <!-- User -->
      <div class="flex items-center gap-4">
        <span class="text-sm text-slate-600 hidden sm:block">
          {{ if .portalUser }}{{ .portalUser.Nombre }}{{ end }}
        </span>
        <a href="/portal/logout" class="text-sm text-red-500 hover:text-red-700 font-medium transition-colors">
          Cerrar sesión
        </a>
      </div>
    </div>
  </header>

  <!-- Content -->
  <main class="flex-1 max-w-6xl mx-auto w-full px-4 sm:px-6 py-8">
    {{embed}}
  </main>

  <!-- Footer -->
  <footer class="border-t border-slate-200 py-4 text-center text-xs text-slate-400">
    Powered by U-site &mdash; &copy; 2025
  </footer>

</body>
</html>
