style: Inter font + aesthetic refinement per reference dashboard

- Add Inter via next/font/google with font-feature-settings cv02-cv11
- Background app color → #f9fafb (subtle gray, not pure white)
- Sidebar dark bg → #1a1a2e, width 260px, 0.08em tracking on labels
- Dashboard header → breadcrumb style (Dashboard > Entidad)
- Stat cards → uppercase label, 28px semibold number, mini sparkline bars
- Average score now computed from project_scores
- Card padding → generous, divide-y for list items (no internal padding)
- All font sizes → explicit [13px] for body, [11px] for labels
- Badge → gray-50 default, cleaner pill borders
- Login → centered on bg-app, 2.5 vertical padding on inputs
- Landing → bg-app, backdrop-blur-md, tighter hero heading
- Progress → gray-100 track, h-2 default
- Skeleton → gray-100 instead of slate-100

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

Author: Cespial

src/app/dashboard/dashboard-shell.tsx

@@ -14,18 +14,22 @@ export function DashboardShell({ children, userName, userEmail, orgType }: Dashb
   return (
     <div className="min-h-screen bg-bg-app">
       <Sidebar userName={userName} userEmail={userEmail} orgType={orgType} />
-      <main className="ml-64">
-        {/* Header bar */}
-        <header className="sticky top-0 z-30 flex items-center justify-between border-b border-border bg-white/80 backdrop-blur-sm px-6 py-3">
-          <div className="text-xs font-medium uppercase tracking-wide text-text-muted">
-            {orgType === "entity" ? "Entidad" : orgType === "municipality" ? "Municipio" : ""}
+      <main className="ml-[260px]">
+        {/* Header — breadcrumb style, like reference */}
+        <header className="sticky top-0 z-30 flex items-center justify-between border-b border-border bg-white/80 backdrop-blur-md px-8 py-3.5">
+          <div className="flex items-center gap-2 text-[13px]">
+            <span className="text-text-muted">Dashboard</span>
+            <span className="text-text-muted">&gt;</span>
+            <span className="font-medium text-accent">
+              {orgType === "entity" ? "Entidad" : orgType === "municipality" ? "Municipio" : "Overview"}
+            </span>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2.5">
             <div className="h-2 w-2 rounded-full bg-success" />
-            <span className="text-xs text-text-muted">Conectado</span>
+            <span className="text-[12px] text-text-muted">Conectado</span>
           </div>
         </header>
-        <div className="p-6">{children}</div>
+        <div className="px-8 py-8">{children}</div>
       </main>
     </div>
   );

src/app/dashboard/loading.tsx

@@ -1,40 +1,45 @@
 export default function DashboardLoading() {
   return (
-    <div className="space-y-6 animate-fade-in">
+    <div className="space-y-8 animate-fade-in">
       {/* Title skeleton */}
       <div className="space-y-2">
-        <div className="h-8 w-48 rounded-lg bg-slate-100 animate-shimmer" />
-        <div className="h-4 w-72 rounded bg-slate-100 animate-shimmer" />
+        <div className="h-7 w-56 rounded-lg bg-gray-100 animate-shimmer" />
+        <div className="h-4 w-72 rounded bg-gray-100 animate-shimmer" />
       </div>
 
       {/* Stats grid skeleton */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
         {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="card-premium p-5">
-            <div className="flex items-start justify-between">
-              <div className="space-y-2">
-                <div className="h-3 w-20 rounded bg-slate-100 animate-shimmer" />
-                <div className="h-7 w-12 rounded bg-slate-100 animate-shimmer" />
+          <div key={i} className="card-premium px-5 py-5">
+            <div className="h-3 w-24 rounded bg-gray-100 animate-shimmer" />
+            <div className="mt-3 flex items-end justify-between">
+              <div className="h-8 w-16 rounded bg-gray-100 animate-shimmer" />
+              <div className="flex items-end gap-[3px] h-7">
+                {Array.from({ length: 7 }).map((_, j) => (
+                  <div key={j} className="w-[4px] rounded-[1px] bg-gray-100 animate-shimmer" style={{ height: `${30 + Math.random() * 70}%` }} />
+                ))}
               </div>
-              <div className="h-10 w-10 rounded-[var(--radius-input)] bg-slate-100 animate-shimmer" />
             </div>
+            <div className="mt-3 h-3 w-20 rounded bg-gray-100 animate-shimmer" />
           </div>
         ))}
       </div>
 
       {/* Content skeleton */}
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {Array.from({ length: 2 }).map((_, i) => (
-          <div key={i} className="card-premium p-5">
-            <div className="h-5 w-40 rounded bg-slate-100 animate-shimmer mb-4" />
-            <div className="space-y-3">
+          <div key={i} className="card-premium">
+            <div className="px-6 pt-5 pb-4">
+              <div className="h-3 w-40 rounded bg-gray-100 animate-shimmer" />
+            </div>
+            <div className="divide-y divide-border">
               {Array.from({ length: 3 }).map((_, j) => (
-                <div key={j} className="flex items-center justify-between p-3">
+                <div key={j} className="flex items-center justify-between px-6 py-3.5">
                   <div className="space-y-1.5">
-                    <div className="h-4 w-48 rounded bg-slate-100 animate-shimmer" />
-                    <div className="h-3 w-24 rounded bg-slate-100 animate-shimmer" />
+                    <div className="h-4 w-48 rounded bg-gray-100 animate-shimmer" />
+                    <div className="h-3 w-24 rounded bg-gray-100 animate-shimmer" />
                   </div>
-                  <div className="h-5 w-16 rounded-full bg-slate-100 animate-shimmer" />
+                  <div className="h-5 w-16 rounded-full bg-gray-100 animate-shimmer" />
                 </div>
               ))}
             </div>