UX: notificaciones de chat con toast y sonido (WebAudio) + skeletons de carga en Agenda y Chat

frontend/src/pages/Agenda.tsx

@@ -1179,7 +1179,29 @@ const Agenda: FC = () => {
           {error && <p className="text-rose-600 text-sm mb-4">{error}</p>}
 
           {loading ? (
-            <Skeleton count={6} className="h-12 w-full" />
+            viewMode === 'lista' ? (
+              <Skeleton count={6} className="h-12 w-full" />
+            ) : (
+              /* Skeleton con forma de grid (columnas de médicos × filas) */
+              <div className="rounded-2xl border border-theme-border p-3 animate-pulse">
+                <div className="flex gap-2 mb-2">
+                  <div className="h-9 w-20 shrink-0 rounded-xl bg-theme-border-strong" />
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <div key={i} className="h-9 flex-1 rounded-xl bg-theme-border-strong" />
+                  ))}
+                </div>
+                <div className="space-y-1.5">
+                  {Array.from({ length: 6 }).map((_, r) => (
+                    <div key={r} className="flex gap-2">
+                      <div className="h-10 w-20 shrink-0 rounded-xl bg-theme-border-strong" />
+                      {Array.from({ length: 5 }).map((_, c) => (
+                        <div key={c} className="h-10 flex-1 rounded-xl bg-theme-border-strong" />
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )
           ) : viewMode === 'doctores' ? (
             gridColumns.length === 0 ? (
               <EmptyState